jQuery 等效于 JavaScript 的 addEventListener 方法

Question

我正在尝试找到与此 JavaScript 方法调用等效的 jQuery ：

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

我已经做到了：

$(document).click(select_element);

但这并没有达到相同的结果，作为 JavaScript 方法的最后一个参数 - 一个 boolean 指示事件处理程序是否应该在捕获或冒泡阶段执行（根据我对Z80791B3AE7002FAA88C246876的理解） /js/events_advanced.html ) - 被排除在外。

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

Answer 1

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

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

Answer 2

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

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

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

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

Answer 3

最接近的是绑定 function：

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

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

Answer 4

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

这不起作用（我已经尝试on / bind / load方法）：

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

但是，这有效：

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

Answer 5

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

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>

Answer 7

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

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

以下是来自上述处理中的链接的事件流讨论：

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

一些关键点是：

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