jQuery等同于JavaScript的addEventListener方法

2020/10/19 09:01 · javascript ·  · 0评论

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

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

我已经达到:

$(document).click(select_element);

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

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

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

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

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

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

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

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

最接近的是bind函数:

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

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

需要注意的一件事是,jQuery事件方法不会loadembed包含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);

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

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

在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”标题下
  • 如果将处理程序包含在匿名函数中,则可以包含参数
本文地址:http://javascript.askforanswer.com/jquerydengtongyujavascriptdeaddeventlistenerfangfa.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!