jQuery 等效于 JavaScript 的 addEventListener 方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2398099/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery equivalent of JavaScript's addEventListener method
提问by Bungle
I'm trying to find the jQuery equivalent of this JavaScript method call:
我正在尝试找到与此 JavaScript 方法调用等效的 jQuery：
document.addEventListener('click', select_element, true);
I've gotten as far as:
我已经到了：
$(document).click(select_element);
but that doesn't achieve the same result, as the last parameter of the JavaScript method - a boolean that indicates whether the event handler should be executed in the capturing or bubbling phase (per my understanding from http://www.quirksmode.org/js/events_advanced.html) - is left out.
但这并没有达到与 JavaScript 方法的最后一个参数相同的结果 - 一个布尔值，指示是否应该在捕获或冒泡阶段执行事件处理程序（根据我对http://www.quirksmode.org 的理解/js/events_advanced.html) - 被排除在外。
How do I specify that parameter, or otherwise achieve the same functionality, using jQuery?
如何使用 jQuery 指定该参数或以其他方式实现相同的功能？
采纳答案by Russ Cam
Not all browsers support event capturing (for example, Internet Explorer versions less than 9 don't) but all do support event bubbling, which is why it is the phase used to bind handlers to events in all cross-browser abstractions, jQuery's included.
并非所有浏览器都支持事件捕获（例如，低于 9 的 Internet Explorer 版本不支持）但所有浏览器都支持事件冒泡，这就是为什么它是用于将处理程序绑定到所有跨浏览器抽象中的事件的阶段，包括 jQuery。
The nearest to what you are looking for in jQuery is using bind()(superseded by on()in jQuery 1.7+) or the event-specific jQuery methods (in this case, click(), which calls bind()internally anyway). All use the bubbling phase of a raised event.
与您在 jQuery 中寻找的最接近的是 using bind()（on()在 jQuery 1.7+ 中被取代）或特定于事件的 jQuery 方法（在这种情况下，click()，bind()无论如何都在内部调用）。所有都使用引发事件的冒泡阶段。
回答by Russ Cam
As of jQuery 1.7, .on()is now the preferred method of binding events, rather than .bind():
从 jQuery 1.7 开始，.on()现在是绑定事件的首选方法，而不是.bind()：
From http://api.jquery.com/bind/:
As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs. For more flexible event binding, see the discussion of event delegation in .on() or .delegate().
从 jQuery 1.7 开始， .on() 方法是将事件处理程序附加到文档的首选方法。对于早期版本， .bind() 方法用于将事件处理程序直接附加到元素。处理程序附加到 jQuery 对象中当前选定的元素，因此这些元素必须在调用 .bind() 时存在。要获得更灵活的事件绑定，请参阅 .on() 或 .delegate() 中事件委托的讨论。
The documentation page is located at http://api.jquery.com/on/
文档页面位于 http://api.jquery.com/on/
回答by Ben Rowe
The closest thing would be the bind function:
最接近的是绑定函数：
$('#foo').bind('click', function() {
alert('User clicked on "foo."');
});
回答by tbjers
One thing to note is that jQuery event methods do not fire/trap loadon embedtags that contain SVG DOM which loads as a separate document in the embedtag. The only way I found to trap a loadevent on these were to use raw JavaScript.
有一点要注意的是，jQuery的事件方法不火/陷阱load上embed包含SVG DOM其负载作为一个单独的文件标签embed的标签。我发现load在这些上捕获事件的唯一方法是使用原始 JavaScript。
This will not work (I've tried on/bind/loadmethods):
这是不行的（我试过on/ bind/load方法）：
$img.on('load', function () {
console.log('FOO!');
});
However, this works:
但是，这有效：
$img[0].addEventListener('load', function () {
console.log('FOO!');
}, false);
回答by tbjers
You should now use the .on()function to bind events.
您现在应该使用该.on()函数来绑定事件。
回答by Xitalogy
Here is an excellent treatment on the Mozilla Development Network (MDN) of this issue for standard JavaScript (if you do not wish to rely on jQuery or understand it better in general):
这是 Mozilla 开发网络 (MDN) 上针对标准 JavaScript 的此问题的出色处理（如果您不希望依赖 jQuery 或总体上更好地理解它）：
https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener
https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener
Here is a discussion of event flow from a link in the above treatment:
以下是来自上述处理中的链接的事件流的讨论：
http://www.w3.org/TR/DOM-Level-3-Events/#event-flow
http://www.w3.org/TR/DOM-Level-3-Events/#event-flow
Some key points are:
一些关键点是：
- It allows adding more than a single handler for an event
- It gives you finer-grained control of the phase when the listener gets activated (capturing vs. bubbling)
- It works on any DOM element, not just HTML elements
- The value of "this" passed to the event is not the global object (window), but the element from which the element is fired. This is very convenient.
- Code for legacy IE browsers is simple and included under the heading "Legacy Internet Explorer and attachEvent"
- You can include parameters if you enclose the handler in an anonymous function
- 它允许为一个事件添加多个处理程序
- 当侦听器被激活（捕获与冒泡）时，它可以让您对相位进行更细粒度的控制
- 它适用于任何 DOM 元素，而不仅仅是 HTML 元素
- 传递给事件的“this”的值不是全局对象（窗口），而是触发元素的元素。这是非常方便的。
- 旧版 IE 浏览器的代码很简单，包含在“旧版 Internet Explorer 和 attachEvent”标题下
- 如果将处理程序包含在匿名函数中，则可以包含参数
回答by antelove
$( "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>