jQuery绑定事件的四种方式：bind、live、delegate、on

一、jQuery操做DOM元素的绑定事件的四种方式

　　jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off。

二、必备的基础知识: DOM树

　　示例，这是在browser环境下的一棵模拟DOM树：

　　

　　咱们的页面能够理解为一棵DOM树，当咱们在叶子结点上作什么事情的时候（如click一个a元素），若是咱们没有人为的设置stopPropagation(Moder Browser), 　

　　cancelBubble(IE), //阻止传播（现代的浏览器），取消冒泡（ie浏览器），那么它的全部父元素，祖宗元素都会受之影响，绑定的事件也对它们产生做用。

　　$('a').bind('click', function() { alert("That tickles!") });

　　当咱们点击a，首先会触发它自己所绑定的click事件，而后会一路往上，触发它的父元素，祖先元素上全部绑定的click事件：

三、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()来实现的，

 　  优势：提供了一种统一绑定事件的方法。

　　缺点：也许会对你产生一些困扰，由于它隐藏了前面咱们所介绍的三种方法的细节。

七、四种方式的异同和优缺点

　　相同点：1.都支持单元素多事件的绑定；空格相隔方式或者大括号替代方式;

　 　　　　　2.均是经过事件冒泡方式，将事件传递到document进行事件的响应；

　　比较和联系:

　　　　　　1.bind()函数只能针对已经存在的元素进行事件的设置；可是live(),on(),delegate()均支持对将来新添加元素的事件设置；

　　　　　　2.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版本已经删除；

 　　　　　 3.live()函数和delegate()函数二者相似，可是live()函数在执行速度，灵活性和CSS选择器支持方面较delegate()差些；

八、结论

　　　　　　用.bind()的代价是很是大的，它会把相同的一个事件处理程序hook到全部匹配的DOM元素上。【bind：直接绑定到元素上，有一个绑一个。】

　　　　　　不要再用.live()了，它已经再也不被推荐了。

　　　　　　.delegate()会提供很好的方法来提升效率，同时咱们能够添加到动态建立的元素上。

　　　　　  .on()是整合了以前的3种方式的新事件绑定机制，咱们能够用.on()来代替上述的3种方法。

 九、绑定多事件的处理

　　　　　　单事件处理：例如 $(selector).bind("click",data,function);

　　　　　　多事件处理：

　　　　　　　　　　1.利用空格分隔多事件，例如 $(selector).bind("click dbclick mouseout",data,function);

　　　　　　　　　   2.利用大括号灵活定义多事件，例如 $(selector).bind({event1:function, event2:function, ...})　　　　　　　　　　

　　　　     空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数的状况；

　　　　　  大括号替代方式：绑定较为灵活，能够给事件单独绑定函数。　

 

参考文献：

　　http://www.cnblogs.com/xilipu31/p/4105794.html

　　http://blog.csdn.net/panfang/article/details/21705681

　　http://www.cnblogs.com/piercalex/archive/2013/03/30/2990679.html

　　http://www.51edu.com/it/bckf/35687.html