javascript - jQuery.on();与 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() 注册的处理程序中 return false; 几乎没有用，调用 event.stopPropagation( )。除此之外，将 native 事件处理程序注册与 jQuery 之类的库将执行的工作混合在一起可能是一个非常糟糕的主意，除非您真的知道自己在做什么。

有a question asked almost exactly like this one就在今天之前。