jQuery的.on()、.bind()、.live()和.delegate()之间的区别并非总是那么明显的,然而,如果我们对所有的不同之处都有清晰的理解的话,那么这将会有助于我们编写出更加简洁的代码,更好的性能优化,以及防止出现不必要的错误。
首先简述下回涉及到的几个知识点: DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子:
事件冒泡 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。
$('a').bind('click', function() {
alert("That tickles!");
});
因此一个单击操作会触发alert函数的执行。
click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素,只要是它的某个后代元素上的单击事件被触发,事件就会传给它。
在操纵DOM的语境中,document是根节点。
现在我们可以较容易地说明.on()、.bind()、.live()和.delegate()的不同之处了。 首先我们来看下几者的调用:
$(selector).bind(event,data,function);
$(selector).live(event,data,function); //jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替
$(selector).delegate(childSelector,event,data,function)//jquery1.4.2及其以上版本;
$(selector).on(event,childselector,data,function); //jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式;
event 必需项;添加到元素的一个或多个事件,例如 click,dblclick等; 单事件处理:例如 $(selector).bind("click",data,function); 多事件处理:
$(selector).bind("click dbclick mouseout",data,function);
$(selector).bind({event1:function, event2:function, ...});
空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况; 大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;
data 可选;需要传递的参数;
function 必需项;当绑定事件发生时,需要执行的函数;适用所有版本,但是根据官网解释,自从jquery1.7版本以后bind()函数推荐用on()来代替。
接下来就详细说下几者之间的区别:
.bind()是直接绑定在元素上,也很好的解决了浏览器在事件处理中的兼容问题。如果不人为的设置stopPropagation(Moder Browser), cancelBubble(IE),那么它的所有父元素,祖宗元素都会受之影响;如之前举例:
$('a').bind('click', function() {
alert("That tickles!");
});
当我们在a 上面点击的时候,首先会触发它本身所绑定的click事件,然后会一路往上,触发它的父元素,祖先元素上所有绑定的click事件。 另外,.click(), .hover()...这些非常方便的事件绑定,都是bind的一种简化处理方式。对于利用ID选出来的元素是非常好的,不仅仅是很快的可以hook上去(因为一个页面只有一个id),而且当事件发生时,handler可以立即被执行(相对于后面的live, delegate)实现方式; 缺点
.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。 一旦事件冒泡到document上,jQuery将会查找selector/event metadata,然后决定那个handler应该被调用。当handler在执行的时候,因为有冒泡的参与,确实会有一些延迟,但是绑定的时候是特别的快。 和.bind()相比的时候有一个好处就是我们不需要在每个元素上再去绑定事件,而只在document上绑定一次就可以了。尽管这个不是最快的方式,但是确实是最少浪费的。 优点
缺点
当然,live方法还可以被绑定到具体的元素(或context)而不是document上,像这样:
$('a', $('#container')).live(...);
.delegate()则是更精确的小范围使用事件代理,性能优于.live()。它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。而和.live()相同的地方在于都是用event delegation;
优点
缺点
.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制。.bind(), .live(), .delegate()都是通过.on()来实现的,.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的。