jQuery中.bind() .live() .delegate() .on()区别

$(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);

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

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

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

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

data：可选；须要传递的参数；

function：必需；当绑定事件发生时，须要执行的函数；适用全部版本，可是根据官网解释，自从jquery1.7版本之后bind()函数推荐用on()来代替。

 

 

一、.bind()是直接绑定在元素上，也很好的解决了浏览器在事件处理中的兼容问题。若是不人为的设置stopPropagation(Moder Browser), cancelBubble(IE)，那么它的全部父元素，祖宗元素都会受之影响

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

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

/* The .bind() method attaches the event handler directly to the DOM 
   element in question ( "#members li a" ). The .click() method is 
   just a shorthand way to write the .bind() method. */

$( "#members li a" ).bind( "click", function( e ) {} ); 
$( "#members li a" ).click( function( e ) {} );  

.click(), .hover()...这些很是方便的事件绑定，都是bind的一种简化处理方式。对于利用ID选出来的元素是很是好的，不单单是很快的能够hook上去(由于一个页面只有一个id),并且当事件发生时，handler能够当即被执行(相对于后面的live, delegate)实现方式

缺点：

• 它会绑定事件到全部的选出来的元素上
• 它不会绑定到在它执行完后动态添加的那些元素上
• 当元素不少时，会出现效率问题
• 当页面加载完的时候，你才能够进行bind()，因此可能产生效率问题

二、.live()则是经过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。一旦事件冒泡到document上，jQuery将会查找selector/event metadata,而后决定那个handler应该被调用。当handler在执行的时候，由于有冒泡的参与，确实会有一些延迟，可是绑定的时候是特别的快。和.bind()相比的时候有一个好处就是咱们不须要在每一个元素上再去绑定事件，而只在document上绑定一次就能够了。尽管这个不是最快的方式，可是确实是最少浪费的。

优势：

• 这里仅有一次的事件绑定，绑定到document上而不像.bind()那样给全部的元素挨个绑定
• 那些动态添加的elemtns依然能够触发那些早先绑定的事件，由于事件真正的绑定是在document上
• 你能够在document ready以前就能够绑定那些须要的事件

缺点：

• 从1.7开始已经不被推荐了，因此你也要开始逐步淘汰它了。
• Chaining没有被正确的支持
• 当使用event.stopPropagation()是没用的，由于都要到达document
• 由于全部的selector/event都被绑定到document, 因此当咱们使用matchSelector方法来选出那个事件被调用时，会很是慢
• 当发生事件的元素在你的DOM树中很深的时候，会有performance问题

三、.delegate()则是更精确的小范围使用事件代理，性能优于.live()。它不会把全部的event所有绑定到document,而是由你决定把它放在哪儿。而和.live()相同的地方在于都是用event delegation.

 优势：

• 你能够选择你把这个事件放到那个元素上了
• chaining被正确的支持了
• jQuery仍然须要迭代查找全部的selector/event data来决定那个子元素来匹配，可是由于你能够决定放在那个根元素上，因此能够有效的减少你所要查找的元素。
• 能够用在动态添加的元素上

缺点：

• 须要查找那个那个元素上发生了那个事件了，尽管比document少不少了，不过，你仍是得浪费时间来查找。

四、.on()则是最新的1.9版本整合了以前的三种方式的新事件绑定机制。.bind(), .live(), .delegate()都是经过.on()来实现的，.unbind(), .die(), .undelegate(),也是同样的都是经过.off()来实现的。