学会区别 $().live() 、 $().bind() 、$().delegate()

在修改项目的BUG的时候，遇到一个简单的问题，当时不是很清晰。

事件冒泡 其实就是事件的传播，是往根传播的。代码上看起来像是从里往外传播。DOM模型上是从下往上传播。

DOM模型：

一个简单的列子就是，我们在a标签定义一个alert函数之后，他会怎么冒泡呢？

他是这样传播的:

这个冒泡机制弄明白了，接着就是我的问题了 那么Jquery中的.bind   .live  .on  .delegate你能区别吗？

什么时候用哪一个更好呢?

为什么?

这才是我以后不清楚的点。

借助DOM模型 我们可以弄明白；

1.bind  

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

就是上图alert的冒泡机制，jquery去找出所有的$('a')元素，并且把alert事件绑定在元素上；

2.live   

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

是定义的未来的事件，为什么是未来呢，其实与bind不同  live是把事件定义在根上的 也就是$(document)上。

而$('a')和‘click'事件  仅仅只是作为参数，作为判断的依据。

只要有事件冒泡到了document节点，就去判断是不是点击事件，然后判断元素是不是匹配目标$('a')元素，若是都满足，就促发alert事件。

所以看起来就像是定义在未来的事件一样。

live方法还可以被绑定到具体的元素(或context)而不是document上

3.on

加载后执行 略过

4.delegate

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

事件绑定到了具体的元素#container上，然后任何时间冒泡到这个元素节点的时候，就去判断是不是click事件，目标元素是不是匹配’a';

若是都满足的话就触发alert事件。

所以，看起来delegate其实就像是live方法绑定到具体元素上；也就是说我们可以这样写:

$('a').live()...  等价于 $(document).delegate('a',.....)

$('a').live('click', function() { blah() }); 
　　// 或者 
　　$(document).delegate('a', 'click', function() { blah() });

也不全是；实际上delegate是我向大家推荐的方式:

原因其实很简单  就是两个方面

1.速度

delegate不用去全局找''a''   仅仅需要找到document

2.灵活性