JavaScript的addEventListener方法的jQuery等效方法

Question

我正在尝试找到 jQuery 中等价于这个 JavaScript 方法调用的方法：

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

我已经做到了：

$(document).click(select_element);

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

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

- Bungle

---

jQuery不支持事件捕获，因为IE不支持事件捕获，而jQuery支持IE。你是在寻找IE兼容性吗？ - Crescent Fresh

谢谢，Crescent Fresh - 现在我明白了。我确实需要IE兼容性，因此我想我需要忘记捕获阶段。 - Bungle

Answer 1

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

在jQuery中，最接近您所需的是使用bind()（在jQuery 1.7+中被on() 取代）或特定于事件的jQuery方法（在本例中是click()，它内部调用了bind()）。所有这些方法都使用了一个引发事件的冒泡阶段。

- Russ Cam

---

看起来IE9终于支持它了。http://blogs.msdn.com/b/ie/archive/2010/03/26/dom-level-3-events-support-in-ie9.aspx - some

他们为什么不支持事件捕获？事件捕获有哪些缺点？ - Aakash

你的意思是说，OP想要的不可能实现——必须使用冒泡，而不能使用捕获。对吗？ - Noumenon

Answer 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/

- user315772

---

被接受的答案已经被编辑以解决这个问题。 - ReinstateMonica3167040

Answer 3

最接近的东西应该是bind函数：

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

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

- Ben Rowe

Answer 4

需要注意的是，jQuery事件方法无法在包含以独立文档形式加载的SVG DOM的embed标签上触发/捕获load。我找到的唯一方法是使用原始JavaScript来捕获这些标签上的load事件。

以下方法都不会生效（我已经尝试过on/bind/load方法）:

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

然而，这样做是有效的：

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

- tbjers

---

请注意，如果您不打算覆盖元素的任何其他绑定事件处理程序，则下面是正确的方法。 - r3wt

$img是什么？ - anatol

Answer 5

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

- user370770

Answer 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>

- antelove

Answer 7

这是关于标准JavaScript的一个非常好的解决方案，可以在Mozilla开发网络（MDN）上找到（如果您不想依赖jQuery或者希望更全面地了解它）。

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

这是关于上述处理中链接的事件流讨论：

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

一些关键点包括：

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

- Xitalogy