JQurey事件绑定方法与区别

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/diypp2012/article/details/78815033

JQurey中用于绑定事件的方法包括bind()、live()、delegate()和on()。

$(selector).bind(event, data, function)
//jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法 
$(selector).live(event, data, function)
//jquery1.4.2及其以上版本
$(selector).delegate(childSelector, event, data, function)
//jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind()live()绑定事件方式;
$(selector).on(event, childselector, data, function) 

注解:
event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;
单事件处理:例如 $(selector).bind("click",data,function)
多事件处理:
1. 利用空格分隔多事件,例如 $(selector).bind("click dbclick ",data,function)
2. 利用大括号灵活定义多事件,例如 $(selector).bind({event1:function, event2:function, ...}) 
  空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;
data:可选;需要传递的参数;
function:必需;当绑定事件发生时,需要执行的函数;适用所有版本。
A. bind方法
1. 从jQuery 1.0开始存在
2. 直接绑定在元素上,跨浏览器,可以很好的解决兼容问题
3. 简单的实现方法(如.click(), .hover())
4. 对于利用id选出来的元素是非常好的,不仅仅是很快的可以hook上,而且当事件发生时,方法可以立即被执行(相对于后面的live, delegate)实现方式
缺点:
1. 它会绑定事件到所有的选出来的元素上,但不会绑定到在它执行完后动态添加的那些元素
2. 存在效率问题:当匹配元素多时;
3. 当页面加载完的时候,才可以进行bind(),影响加载效率
B. live方法
1. 通过冒泡的方式来绑定到元素上的, 使用的是事件委托的概念, 更适合列表类型的,绑定到document DOM节点上。
2. 一旦事件冒泡到document上,jQuery将会查找selector/event metadata,然后决定那个handler应该被调用。
3. 当handler在执行的时候,因为有冒泡的参与,确实会有一些延迟,但是绑定的时候是特别的快。
4. 和.bind()相比的时候有一个好处就是我们不需要在每个元素上再去绑定事件,而只在document上绑定一次就可以了。尽管这个不是最快的方式,但是确实是最少浪费的。
优点:
1. 仅有一次的事件绑定,绑定到document上
2. 动态添加的element可触发早已绑定的事件
3. 可以在document ready之前,绑定那些需要的事件
缺点:
1. 从1.7开始已经不被推荐了,所以你也要开始逐步淘汰它了
2. 当使用event.stopPropagation()(或cancelBubble)是无效的
3. 效率问题:所有的selector/event都被绑定到document, 所以查找时那个事件被调用时,会非常慢;当发生事件的元素在你的DOM树中很深的时候,会有效率问题
C. delegate方法
1. 更精确的小范围使用事件代理,性能优于.live(), 直接绑定在元素上
2. jQuery仍需要迭代查找所有的selector/event来决定那个子元素来匹配
3. 可以决定绑定在根元素上,有效的减小你所要查找的元素
4. 可以用在动态添加的元素上
D. on方法
JQurey 1.9版本整合了之前的三种方式的新事件绑定机制,通过on来进行绑定事件,通过off来进行解绑。

猜你喜欢

转载自blog.csdn.net/diypp2012/article/details/78815033
今日推荐