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()中注册的处理程序在达到该级别之前不会运行。同时，首先到达“外部”级别的另一个事件处理程序，并由浏览器执行。

因此，在.on()中注册的处理程序中的.on()几乎毫无用处，就像对event.stopPropagation()的调用一样。除此之外，将本机事件处理程序注册与像jQuery这样的库所做的工作混为一谈可能是一个非常糟糕的主意，除非您真的知道自己在做什么。

就在不久前的今天，a question asked almost exactly like this one还在那里。

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 docs (重点后加)：

当事件被触发时要执行的函数。值false也被允许作为函数的简写，它只是返回false。

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

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

请注意，alert应该会出现，因此addEventListener方法工作正常。关于为什么会这样，请参见@Pointy的答案。