jQuery中的.bind()、.live()和.delegate()之间区别分析_jquery

因此一个单击操作会触发alert函数的执行。

click事件接着会向树的根方向传播，广播到父元素，然后接着是每个祖先元素，只要是它的某个后代元素上的单击事件被触发，事件就会传给它。

在操纵DOM的语境中，document是根节点。

现在我们可以较容易地说明.bind()、.live()和.delegate()的不同之处了。
.bind()

代码如下:

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

这是最简单的绑定方法了。JQuery扫描文档找出所有的$(‘a')元素，并把alert函数绑定到每个元素的click事件上。
.live()

代码如下:

$('a').live('click',function(){alert('That tickles!')})

JQuery把alert函数绑定到$(document)元素上，并使用'click'和'a'作为参数。任何时候只要有事件冒泡到document节点上，它就查看该事件是否是一个click事件，以及该事件的目标元素与'a'这一CSS选择器是否匹配，如果都是的话，则执行函数。
live方法还可以被绑定到具体的元素(或“context”)而不是document上，像这样：

代码如下:

$('a',$('#container')[0]).live('click',function(){alert('That tickles!')})

.delegate()

代码如下:

$('#container').delegate('a','click',function(){alert('That tickles!')})

JQuery扫描文档查找$('#container')，并使用click事件和'a'这一CSS选择器作为参数把alert函数绑定到$('#container')上。任何时候只要有事件冒泡到$('#container')上，它就查看该事件是否是click事件，以及该事件的目标元素是否与CSS选择器相匹配。如果两种检查的结果都为真的话，它就执行函数。
可以注意到，这一过程与.live()类似，但是其把处理程序绑定到具体的元素而非document这一根上。精明的JS'er们可能会做出这样的结论，即$('a').live() == $(document).delegate('a')，是这样吗?嗯，不，不完全是。
为什么.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对象了。