相当于 JavaScript 的 addEventListener 方法的 jQuery

Question

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

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

我已经做到了：

$(document).click(select_element);

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

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

Answer 1

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

最接近您在 jQuery 中寻找的内容是使用

bind()

（在 jQuery 1.7+ 中被

on()

取代）或特定于事件的 jQuery 方法（在本例中为

click()

，其中无论如何，都会在内部调用

bind()

）。全部都使用引发事件的冒泡阶段。

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/

Answer 3

最接近的是绑定函数：

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

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

Answer 4

需要注意的一件事是，jQuery 事件方法不会在包含 SVG DOM 的

load

标签上触发/捕获

embed

，该 SVG 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()

函数来绑定事件。

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

这里是 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”标题下
• 如果将处理程序包含在匿名函数中，则可以包含参数

Answer 8

$("#filter_btn").off("click").on("click", function () {
  // code here...
})