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，这些标记在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

这是针对标准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

一些关键点是：

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

jQuery相当于JavaScript的addEventListener方法

7 个答案: