jQuery.on();与 JavaScript .addEventListener();

Question

有人可以解释一下为什么事件处理程序的执行顺序会根据它们的附加方式而有所不同吗？在下面的示例中，我使用 .on() 和 .addEventListener() 方法来处理不同 DOM 元素上的特定事件。

jsfiddle：http://jsfiddle.net/etsS2/

我认为在这个具体示例，事件处理程序的执行顺序将取决于事件冒泡 - 因此从原始事件目标开始并向上移动到>document 元素。

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

如果我取消注释 on(); 版本，一切都会按预期工作 - jQuery 处理事件的方式与普通 JavaScript 是否有区别？

Answer 1

当您在文档级别使用 .on() 时，您将等待事件一直冒泡到该点。任何中间容器的事件处理程序都已被调用。

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

因此，使用 .on() 注册的处理程序中的 return false; 几乎没有什么用处，就像调用 event.stopPropagation() 一样。代码>.除此之外，将本机事件处理程序注册与像 jQuery 这样的库所做的工作混合在一起可能是一个非常糟糕的主意，除非您认真知道自己在做什么。

就在今天不久前，提出了一个几乎与此完全相同的问题。

Answer 2

看一下 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; 之外不执行任何操作显然这不是应该发生的事情。

来自jQuery 文档（添加了重点）：

事件触发时执行的函数。 值为 false 是
也允许作为简单返回的函数的简写
错误。

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

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

请注意，alert 应该 显示，因此 addEventListener 方法工作正常。请参阅@Pointy 的回答了解原因。