温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

对jQuery中on方法委托事件的理解

发布时间:2020-10-11 15:02:41 来源:网络 阅读:3841 作者:qz357 栏目:web开发

关于on方法中的委托事件,官方JQ API如下:

http://api.jquery.com/on/#on-events-selector-data-handler

参考大牛阮一峰的博文:

http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html


什么时候使用委托事件:

1.对未被创建的元素添加事件监听

2.避免频繁添加或删除event handler,委托父元素来进行事件处理


使用委托事件的优点:

1.大量减少监听元素的开销


使用实例

$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

使用后果,不用每个tr都进行事件绑定,只需要在tbody处进行绑定即可,委托tbody进行对tr点击的响应。


对于on的第二个参数,官方API的解释是:对触发事件元素的后代元素的过滤

个人理解:

过滤之后,this变成tr,事件冒泡到tbody,然后对tr进行操作。

其实on的底层是用了addEventListener,所谓的委托,其实就是借用事件冒泡机制,而且可以指定event.target和event.currentTarget(==this)来指定哪个事件对象





向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI