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

Question

有人可以解释一下,为什么事件处理程序的执行顺序有所不同,具体取决于它们的附加方式？在下面的示例中,我使用.on()和.addEventListener()方法处理不同DOM元素上的特定事件.

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

我认为在这个特定的例子中,事件处理程序的执行顺序取决于event-bubbling- 所以从原始事件开始target并向上移动到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()在达到该级别之前不会运行.与此同时,首先到达"外部"级别的另一个事件处理程序,并由浏览器执行.

因此,return false;在注册的处理程序中,.on()它几乎是无用的,就像调用它一样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);

我认为发生的事情是第三个参数简单地覆盖了你的事件处理函数,并导致事件处理程序什么也不做,但return false;显然不是意味着发生的事情.

从jQuery文档(重点添加):

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

删除false参数,jQuery版本也将正常工作:

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

请注意,alert 应该显示,因此addEventListener方法正常工作.请参阅@ Pointy的答案,了解其原因.