了解Jquery中bind()、live()和delegate()之间的区别

    今天在写一个jquery函数的时候刚好碰到了动态添加的元素无法触发事件的疑问。故了解了一下bind()方法跟live()方法的一些特性，在这里总结一下。 

DOM树

首先我们看一下一个简单的HTML中DOM树的结构

 根据这个DOM树。我们先用bind()函数实现对a标签的一个点击事件：

$('a').bind('click', function() { alert("点击我!") });

 

 因此对a标签的单击操作会触发alert函数的执行

 因为事件冒泡，click事件接着会向树的根方向传播，广播到父元素，然后接着是每个祖先元素，只要是它的某个后代元素上的单击事件被触发，事件就会传给它。因此可以看出进行bind时整个DOM结构就已经需要构建出来。

 

 从DOM的结构中我们可以看出，document是根节点。

我们再来看一下什么是事件冒泡：

举个例子：在一个简单HTML文档里里要应用两个点击事件，一个是div.onclick，另一个就是document.onclick，那么问题就出现了，在调用 div.onclick的时候，由于冒泡事件的存在，会自动的调用document.onclick，由于冒泡的顺序是从里向外的（div->body->document->html）所以div.onclick事件就会被覆盖掉，也就不会执行了。

接下来我们再看看live()

$('a').live('click', function() { alert("点击我!") });

 

 live()函数处理过程是这样的，JQuery把alert函数绑定到$(document)元素上，并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上，它就查看该事件是否是一个click事件，以及该事件的目标元素与’a’这一CSS选择器是否匹配，如果都是的话，则执行函数。

接着我们再看看delegate()

$('#container').delegate('a', 'click', function() { alert("点击我!") });

 JQuery首先扫描文档查找$(‘#container’)，并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上，它就查看该事件是否是click事件，以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话，它就执行函数。

　　可以注意到，这一过程与.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对象了。

仅支持CSS选择器

　　最后一点，live方法有一个非常大的缺点，那就是它仅能针对直接的CSS选择器做操作，这使得它变得非常的不灵活。

为什么说.live()或.delegate()通常比.bind()更好用

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

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

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

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