jQuery 中bind(),live(),delegate(),on() 相关（整理一下）

四者区别：

.bind()是直接绑定在元素上(绑定每个元素，效率低)

$(element).bind(event,[data],fn);

.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。

$(element).live("click",function());

.delegate()则是更精确的小范围使用事件代理，性能优于.live() (绑定在某个元素上，效率高)

$(element_parent).delegate(element_children,event,function());

.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制

$(element_parent).on(event,function(ev)) =》(等同于) .bind() 的$(element).bind(event,[data],fn);

$(document).on(event,element,function(ev)) =》.live()的$(element).live("click",function());

$(element_parent).on(event,element_children,function())=》.delegate()的$(element_parent).delegate(element_children,event,function());

为什么.delegate()要比.live()好用

基于几个原因，人们通常更愿意选用jQuery的delegate方法而不是live方法。考虑下面的例子：

$('a').live('click', function() { blah() });

// 或者

$(document).delegate('a', 'click', function() { blah() });

速度

后者实际上要快过前者，因为前者首先要扫描整个的文档查找所有的$(‘a’)元素，把它们存成jQuery对象。尽管live函数仅需要把’a’作为串参数传递以用做之后的判断，但是$()函数并未“知道”被链接的方法将会是.live()。

而另一方面，delegate方法仅需要查找并存储$(document)元素。

一种寻求避开这一问题的方法是调用在$(document).ready()之外绑定的live，这样它就会立即执行。在这种方式下，其会在DOM获得填充之前运行，因此就不会查找元素或是创建jQuery对象了。

灵活性和链能力

live函数也挺令人费解的。想想看，它被链到$(‘a’)对象集上，但其实际上是在$(document)对象上发生作用。由于这个原因，它能够试图以一种吓死人的方式来把方法链到自身上。实际上，我想说的是，以$.live(‘a’,…)这一形式作为一种全局性的jQuery方法，live方法会更具意义一些。

仅支持CSS选择器

最后一点，live方法有一个非常大的缺点，那就是它仅能针对直接的CSS选择器做操作，这使得它变得非常的不灵活。（bind方法可以绑定任何JavaScript的事件，而live方法在jQuery1.3的时候只支持click, dblclick, keydown, keypress,keyup,mousedown, mousemove, mouseout, mouseover, 和 mouseup.在jQuery 1.4.1中，甚至也支持 focus 和 blue事件了（映射到更合适，并且可以冒泡的focusin和focusout上）。另外，在jQuery 1.4.1中，也能支持hover（映射到"mouseenter mouseleave"）。）

为什么选择.live()或.delegate()而不是.bind()

毕竟，bind看起来似乎更加的明确和直接，难道不是吗？嗯，有两个原因让我们更愿意选择delegate或live而不是bind：

Ÿ           为了把处理程序附加到可能还未存在于DOM中的DOM元素之上。因为bind是直接把处理程序绑定到各个元素上，它不能把处理程序绑定到还未存在于页面中的元素之上。

Ÿ           如果你运行了$(‘a’).bind(…)，而后新的链接经由AJAX加入到了页面中，则你的bind处理程序对于这些新加入的链接来说是无效的。而另一方面live和delegate则是被绑定到另一个祖先节点上，因此其对于任何目前或是将来存在于该祖先元素之内的元素都是有效的。

Ÿ           或者为了把处理程序附加到单个元素上或是一小组元素之上，监听后代元素上的事件而不是循环遍历并把同一个函数逐个附加到DOM中的100个元素上。把处理程序附加到一个（或是一小组）祖先元素上而不是直接把处理程序附加到页面中的所有元素上，这种做法带来了性能上的好处。

停止传播

最后一个我想做的提醒与事件传播有关。通常情况下，我们可以通过使用这样的事件方法来终止处理函数的执行：

$('a').bind('click', function(e) {

  e.preventDefault();

  // 或者

  e.stopPropagation();

});

不过，当我们使用live或是delegate方法的时候，处理函数实际上并没有在运行，需要等到事件冒泡到处理程序实际绑定的元素上时函数才会运行。而到此时为止，我们的其他的来自.bind()的处理函数早已运行了。