您的位置:首页 > Web前端 > JQuery

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

2015-05-16 16:21 423 查看
关于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)来指定哪个事件对象

本文出自 “Rocker” 博客,请务必保留此出处http://rocker.blog.51cto.com/6314218/1651898
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐