原生 JS 相当于 jQuery 委托

动态创建的 dom 元素上的事件委托的本机实现是什么？

我尝试查看 jQuery 源代码，但无法遵循.on method.

注意：目前我在创建 dom 元素后附加事件处理程序，这看起来很标准，但我喜欢 jQuery 的方式.on使用此语法处理动态创建的元素事件$( document ).on( "click", ".selector", handler );.

发生的事情基本上是这样的：

// $(document).on("click", <selector>, handler)
document.addEventListener("click", function(e) {
    for (var target=e.target; target && target!=this; target=target.parentNode) {
    // loop parent nodes from the target to the delegation node
        if (target.matches(<selector>)) {
            handler.call(target, e);
            break;
        }
    }
}, false);

然而，e.currentTarget is document当。。。的时候handler被称为，并且e.stop[Immediate]Propagation()会有不同的工作方式。 jQuery对此进行了很多抽象（包括调用顺序）。

我用过.matches() method https://developer.mozilla.org/en-US/docs/Web/API/Element.matches，它还不是标准的，但已经在现代浏览器中以不同的名称提供。您可以使用自定义谓词而不是选择器来测试元素。和addEventListener显然不兼容oldIE。