jQuery 等效于 JavaScript 的 addEventListener 方法

Posted 2023-02-19

【中文标题】jQuery 等效于 JavaScript 的 addEventListener 方法

【英文标题】：jQuery equivalent of JavaScript's addEventListener method

【发布时间】：2011-01-24 18:45:13

【问题描述】：

我正在尝试找到这个 javascript 方法调用的 jQuery 等效项：

document.addEventListener('click', select_element, true);

我已经做到了：

$(document).click(select_element);

但这并没有达到相同的结果，因为 JavaScript 方法的最后一个参数 - 一个布尔值，指示事件处理程序是否应该在捕获或冒泡阶段执行（根据我对 http://www.quirksmode.org/js/events_advanced.html 的理解） - 是漏掉了。

如何使用 jQuery 指定该参数或以其他方式实现相同的功能？

【问题讨论】：

jQuery 不支持事件捕获，因为 IE 不支持事件捕获，而 jQuery 支持 ;) 您是否在寻找 IE 兼容性？

谢谢，Crescent Fresh - 我认为现在说得通了。我确实需要 IE 兼容性，所以我想我需要忘记捕获阶段。

【参考方案1】：

并非所有浏览器都支持事件捕获（例如，低于 9 的 Internet Explorer 版本不支持）但都支持事件冒泡，这就是为什么它是用于将处理程序绑定到所有跨浏览器抽象中的事件的阶段，包含 jQuery。

最接近您在 jQuery 中寻找的方法是使用 bind()（在 jQuery 1.7+ 中被 on() 取代）或特定于事件的 jQuery 方法（在本例中为 click()，它调用 bind()无论如何在内部）。都使用引发事件的冒泡阶段。

【讨论】：

看来IE9终于支持了。 blogs.msdn.com/b/ie/archive/2010/03/26/…

为什么他们不支持事件捕获？事件捕获的缺点是什么？

为了清楚起见，您是在说 OP 想要的东西是不可能的——您必须使用冒泡，而不能使用捕获。对吗？

【参考方案2】：

从 jQuery 1.7 开始，.on() 现在是绑定事件的首选方法，而不是 .bind()：

来自http://api.jquery.com/bind/：

从 jQuery 1.7 开始，.on() 方法是 将事件处理程序附加到文档。对于早期版本， .bind() 方法用于将事件处理程序直接附加到 元素。处理程序附加到当前选定的元素 jQuery 对象，所以这些元素必须存在于调用点 到 .bind() 发生。有关更灵活的事件绑定，请参阅讨论 .on() 或 .delegate() 中的事件委托。

文档页面位于 http://api.jquery.com/on/

【讨论】：

已接受的答案已被编辑以解决此问题。

【参考方案3】：

最接近的是绑定函数：

http://api.jquery.com/bind/

$('#foo').bind('click', function() 
  alert('User clicked on "foo."');
);

【参考方案4】：

需要注意的一点是，jQuery 事件方法不会在包含 SVG DOM 的embed 标签上触发/捕获load，该标签在embed 标签中作为单独的文档加载。我发现捕获 load 事件的唯一方法是使用原始 JavaScript。

这行不通（我试过on/bind/load方法）：

$img.on('load', function () 
    console.log('FOO!');
);

但是，这是可行的：

$img[0].addEventListener('load', function () 
    console.log('FOO!');
, false);

【讨论】：

应该注意，如果您不打算覆盖元素的任何其他绑定事件处理程序，这是正确的方法。

$img 是什么？

【参考方案5】：

您现在应该使用.on() 函数来绑定事件。

【参考方案6】：

$( "button" ).on( "click", function(event) 

    alert( $( this ).html() );
    console.log( event.target );

 );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<button>test 1</button>
<button>test 2</button>

【参考方案7】：

以下是 Mozilla 开发网络 (MDN) 上针对标准 JavaScript 的此问题的出色处理（如果您不希望依赖 jQuery 或总体上更好地理解它）：

https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener

这里是来自上述处理中的一个链接的事件流的讨论：

http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

一些关键点是：

它允许为一个事件添加多个处理程序 当侦听器被激活时，您可以更精细地控制阶段（捕获与冒泡） 它适用于任何 DOM 元素，而不仅仅是 HTML 元素 传递给事件的“this”值不是全局对象（窗口），而是触发元素的元素。这很方便。 旧版 IE 浏览器的代码很简单，包含在“旧版 Internet Explorer 和 attachEvent”标题下 如果将处理程序包含在匿名函数中，则可以包含参数