jquery 绑定事件区别
jQuery 中提供了四种事件监听方式,分别是 bind、live、delegate、on,对应的解除监听的函数分别是 unbind、die、undelegate、off。
bind
$(selector).bind(event,data,function)
event:事件,必选,一个或多个事件; data:参数,可选; fn:绑定事件发生时执行的函数,必选。
bind()是最直接的、存在最久的绑定方法。
优点:这个方法提供了一种在不同浏览器中对事件处理的兼容性解决方案。
缺点:它会绑定事件到所有的目标元素上,有一个绑一个,在页面上的元素不会动态添加的时候使用它没什么问题。
但如果列表中动态增加一个“列表元素 5”,点击它是没有反应的,必须再 bind 一次才行。也就是说,它不会绑定到在它执行完后动态添加的那些元素上。
当元素很多时,会出现效率问题。当页面加载完的时候,你才可以进行 bind(),所以可能产生效率问题。
live
$(selector).live(event,data,function)
这个方法用到了事件委托的概念来处理事件的绑定。
优点:这里仅有一次的事件绑定,绑定到 document 上而不像.bind()那样给所有的元素挨个绑定。
那些动态添加的元素依然可以触发那些早先绑定的事件,因为事件真正的绑定是在 document 上。
你可以在 document ready 之前就可以绑定那些需要的事件。
delegate
$(selector).delegate(childSelector,event,data,function)
childSelector:selector 的子元素,必需项。
delegate()有点像 live(),不同于.live()的地方在于,它不会把所有的 event 全部绑定到 document,而是由你决定把它放在哪儿。
优点:你可以选择你把这个事件放到那个元素上了。
需要迭代查找所有的 selector/event data 来决定那个子元素来匹配,但是因为你可以决定放在那个根元素上,所以可以有效的减小你所要查找的元素。
可以用在动态添加的元素上。
缺点:需要查找绑定的子元素,尽管比 document 少很多了,不过,你还是得浪费时间来查找。
on
其实.bind(), .live(), .delegate()都是通过.on()来实现的,.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的,
优点:提供了一种统一绑定事件的方法。
缺点:也许会对你产生一些困扰,因为它隐藏了前面我们所介绍的三种方法的细节。
四种方式的异同和优缺点
相同点:
都支持单元素多事件的绑定;空格相隔方式或者大括号替代方式;
均是通过事件冒泡方式,将事件传递到 document 进行事件的响应;
比较和联系:
bind()函数只能针对已经存在的元素进行事件的设置;但是 live(),on(),delegate()均支持对未来新添加元素的事件设置;
bind()支持 Jquery 所有版本;live()支持 jquery1.8-;delegate()支持 jquery1.4.2+;on()支持 jquery1.7+;
bind()函数在 jquery1.7 版本以前比较受推崇,1.7 版本出来之后,官方已经不推荐用 bind(),替代函数为 on(),这也是 1.7 版本新添加的函数,
同样,可以用来代替 live()函数,live()函数在 1.9 版本已经删除;
- live()函数和 delegate()函数两者类似,但是 live()函数在执行速度,灵活性和 CSS 选择器支持方面较 delegate()差些;
结论
用.bind()的代价是非常大的,它会把相同的一个事件处理程序 hook 到所有匹配的 DOM 元素上。【bind:直接绑定到元素上,有一个绑一个。】
不要再用.live()了,它已经不再被推荐了。
.delegate()会提供很好的方法来提高效率,同时我们可以添加到动态创建的元素上。
.on()是整合了之前的 3 种方式的新事件绑定机制,我们可以用.on()来代替上述的 3 种方法。
绑定多事件的处理
单事件处理:例如 $(selector).bind(“click”,data,function);
多事件处理:
利用空格分隔多事件,例如 $(selector).bind(“click dbclick mouseout”,data,function);
利用大括号灵活定义多事件,例如 $(selector).bind({event1:function, event2:function, …})
空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数的情况;
大括号替代方式:绑定较为灵活,可以给事件单独绑定函数。