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

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

本文关键字：addEventListener JavaScript vs on jQuery      更新时间：2023-09-26

有人能解释一下为什么事件处理程序的执行顺序会因其附加方式而异吗？在下面的示例中，我使用.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不同吗？

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

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

因此，在向.on()注册的处理程序中的return false;是非常无用的，对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);

我认为发生的是，第三个参数简单地覆盖了您的事件处理程序函数，并导致事件处理程序除了return false;之外什么都不做，这显然不是应该发生的。

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

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

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

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

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

相关文章：
  • 没有找到相关文章