addEventListener 和 jQuery on 的区别？

【问题标题】：Difference between addEventListener and jQuery on?addEventListener 和 jQuery on 的区别？
【发布时间】：2014-05-12 16:44:44
【问题描述】：

我正在尝试捕获页面上的所有点击事件。

我可以用这个：

window.addEventListener('click', function(e){
    console.log(e.target);

}, true);

或

$("*").delegate("*", "click", function(e){
    if (e.target === this) {
        console.log(e.target);
    }
});

有什么区别？

【问题讨论】：

请参考：stackoverflow.com/questions/8996015/…
$('*') 将选择树中的每一个 DOM 元素并在其上调用 delegate。这没有任何意义...等效的 jquery 应该是 $(window).click(...)，但是请注意，jQuery 不支持事件捕获，因此您不能拥有与 jQuery 中的第一个代码示例完全等效的东西。
这能回答你的问题吗？ jQuery .on(); vs JavaScript .addEventListener();

【解决方案1】：

实际上有几个不同之处：

您不能对 jQuery .on() 使用捕获，这样的事情根本不存在。 jQuery 只支持事件冒泡。但是，您可以使用 .addEventListener()
jQuery .on() 允许您为多个事件附加相同的事件侦听器，而 .addEventListener 仅允许您一次将事件侦听器添加到单个事件类型（尽管您可以使用类似
```
["event type 1", "event type 2"].forEach( function(i){ 
        element.addEventListener(i, function(){} ); 
})
```
但那很混乱）
也许您会认为 .on() 和 .addEventListener() 都将事件侦听器添加到事件目标；它不是那么简单，至少对于 jQuery 来说不是。更多关于这一点，请有人补充细节，因为我也不是很清楚：P
使用 .on() 附加的事件侦听器可以通过调用另一个 jQuery 函数 .trigger() 来调用，但使用 .addEventListener() 附加的事件侦听器将不响应.trigger()

【讨论】：