jQuery.on（）；vs JavaScript.addEventListener（）；

有人能解释一下，为什么事件处理程序的执行顺序会因其连接方式的不同而有所不同？在下面的示例中，我使用

.on（）

和

.addEventListener（）

方法来处理不同

DOM

元素上的特定事件

jsfiddle：

我认为在这个特定的示例中，事件处理程序的执行顺序将取决于

事件冒泡

——因此从原始事件

目标

开始，向上移动到

文档

元素

document.getElementById('outer').addEventListener('mouseup', function (event) {
//$('#outer').on('mouseup', function (event) {
    alert('This alert should not show up!');
}, false);

如果我取消注释

on（）版本一切按预期工作-与普通的
JavaScript
相反，
jQuery
处理事件的方式是否有差异？
当您在文档级别使用
。on（）
时，您正在等待事件一直冒泡到那一点。已调用任何中间容器的事件处理程序

事件“冒泡”是浏览器查找向事件的实际原始接收者元素的父元素注册的事件处理程序的过程。它在DOM树中向上工作。文档级别是上次检查的级别。因此，在（）上注册的处理程序在达到该级别之前不会运行。同时，首先到达“外部”级别的另一个事件处理程序，并由浏览器执行

因此，
返回false.on（）
注册的处理程序中的code>几乎毫无用处，调用
event.stopPropagation（）
也是如此。除此之外，将本机事件处理程序注册与像jQuery这样的库所做的工作相混合可能是一个非常糟糕的主意，除非您真的知道自己在做什么

就在不久前的今天。
看看
addEventListener
版本：

document.getElementById('outer').addEventListener('mouseup', function (event) {
    alert('This alert should not show up!');
}, false);

这很好，因为第三个参数是
useCapture
，它指定是否应该使用事件的捕获阶段

切换到jQuery版本时：

$('#outer').on('mouseup', function (event) {
    alert('This alert should not show up!');
}, false);

我认为发生的是第三个参数简单地覆盖了事件处理程序函数，导致事件处理程序除了返回false之外什么都不做这显然不是要发生的事情

从（增加强调）开始：

触发事件时要执行的函数该值为false
也可以作为简单返回的函数的简写
错误

删除
false
参数，jQuery版本也将正常工作：

$('#outer').on('mouseup', function (event) {
    alert('This alert should not show up!');
});

请注意，
警报
应该显示，因此
addEventListener
方法工作正常。请参阅@Pointy的答案以了解原因。
返回false
也执行
事件.preventDefault（）
以及
事件.stopPropagation（）
在jQuery事件处理程序中。我之所以创建此结构，是因为
a.link
元素是动态添加的，我需要以某种方式防止
outer
div处理该特定事件-我如何实现这一点？所以基本上你的意思是：$（document）.on（'mouseup'，'a.link'）等于：$（'a.link'）.live（'mouseup'，…）？是的-像
.live（）
，
.delegate（）
，或者新的
.on（）
这样的机制可以通过冒泡工作，而冒泡是从内到外工作的。相反，您可以确保动态添加的元素的事件侦听器在添加到DOM时直接绑定到这些元素。谢谢！他们为什么反对
live（）是有道理的
method——最初我认为不需要将侦听器显式地附加到动态添加的element@Pointy：我知道这个答案已经有几个月了，但是+1解释了它们之间的区别，以及为什么它会导致将原生语言与jQuery甚至绑定混合在一起的问题。我从来没有意识到有这么大的区别，因为我自己把它们混在一起了。非常感谢。