事件委托 on和delegate的适用区别 jquery

大家在做关于大数据的dom时候当在每个循环的单模块添加事件的时候会遇到问题:给单模块的内容添加事件。

1.给每一个单模块绑定事件(产生的大量事件绑定,造成大量的事件绑定,性能消耗,而且还需要解绑(IE会泄漏)

2.利用事件委托使用父级原生绑定实现每一个单模块的绑定事件。(例如新浪微博的每个发布人栏目的所有事件)

大部分人都会选择第二种情况,因为他能对于所有子元素(包括后期通过JS生成的元素)所有的事件监测均能有效,且由于不用对多个元素进行事件绑定,能够有效的节省内存的损耗。

当然jquery会做很好的处理。

他从开始到现在一直在升级这个事件委托 live,bind,delegate,on事件。

具体事件绑定之前和事件绑定之后的实现的性能效果可以参考http://www.cnblogs.com/aaronjs/p/3440647.html这里详细的数据提供参考。

这里值得提出的是on,和delegate的使用问题。先看看jquery1.9.1源码


1.delegate的使用说明

2.on的使用说明:

使用这两个事件的时候大家会在使用选择器selector和事件类型type会经常出错,因为传参顺序不同,当看看源码就会明白,其实jquery在使用事件绑定delegate和on在这两个地方做了区分

使用delegate的时候应该是$("div").delegate(selector,type,fn);

使用on的时候应该是$("div").on(type,selector,fn);

纪念曾经不看源码,经常使用出错的delegate和on的事件绑定日子。

原文地址:https://www.cnblogs.com/dm511418503/p/3598586.html