jQuery等同于JavaScript的addEventListener方法

190

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

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

我已经达到：

$(document).click(select_element);

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

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

— 搞糟
source

3

jQuery不支持事件捕获，因为IE不支持事件捕获，而jQuery支持;）您是否在寻找IE兼容性？

— 新月新鲜

谢谢，新月新鲜食品-我认为现在很有意义。我确实需要IE兼容性，所以我想我需要忘记捕获阶段。

— Bungle 2010年

142

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

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

— 拉斯·卡姆
source

6

看起来IE9终于支持了它。blogs.msdn.com/b/ie/archive/2010/03/26/...

— 一些

以及为什么他们不支持事件捕获？事件捕获的缺点是什么？

— Aakash 2015年

2

明确地说，您是说OP想要什么是不可能的-您必须使用冒泡功能，而不能使用捕获功能。对？

— Noumenon

115

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

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

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

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

接受的答案已被编辑以解决此问题。

— 不是用户

51

最接近的是bind函数：

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

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

— 本·罗
source

14

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

这是不行的（我试过on/ bind/ load方法）：

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

但是，这可行：

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

— tbjers
source

1

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

— r3wt

什么是$img？

— anatol

12

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

2

$( "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>

展开摘要

— 安特洛夫
source

1

在Mozilla开发网络（MDN）上，对于标准JavaScript（如果您不希望依赖jQuery或总体上不太了解它），这是一种出色的解决方案：

https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener

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

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

一些关键点是：

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

— Xitalogy
source