jQuery 之事件处理 3 — bind、live 以及 delegate 的区别

sbind()

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

jQuery 扫描文档找出所有的 $('a') 元素，并把事件处理函数绑定到每个元素的 click 事件上。

live()

$('a').live('click', function() { alert('clicked!') });

用 live() 的话，jQuery 会把事件绑定到 $(document) 上，任何时候只要有事件毛跑到 document 节点上，jQuery 都要检查一下该事件是否是 click 事件，以及触发该事件的元素的 CSS 选择器是否与 'a' 相匹配。如果匹配，则执行相应的事件处理函数。

live() 也可以将事件绑定到具体容器上，而不一定非得绑定在 document 上：

$('a', $('#container')[0]).live(...);

delegate()

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

应该说 delegate() 跟 live() 类似，都是把事件绑定到特定容器上，然后等到事件冒泡到容器上时，在检测事件类型及事件触发元素，最后依次判断是否执行事件触发函数。

live 和 delegate 一样吗？

例如以下代码片段

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

两种方法得到的最终结果没有区别，但是执行的过程却不一样。前者是先扫描页面上所有 'a' 元素，然后绑定事件到 document 节点，最后根据事件类型及事件源作判断；后者是直接扫描 document 节点，然后绑定事件到 document 上，最后判断。前者扫描的是 'a'，后者扫描的就是 document 本身，理论上后者更快一些。

什么时候用 bind，什么时候用 live 或 delegate

bind() 使用起来似乎更为直接，也更容易理解。但是试想这样一种情况：用 $('a').bind(…) 给页面上所有超链接绑定上了事件，但是后来又以 JavaScript 或者 Ajax 的方式向页面中新添加了一些超链接，那么这些新的超链接上是没被绑定事件的，但是 live() 和 delegate() 不一样，它们两个绑定的是 document 之类的父节点，只要事件能冒泡到上面，即使是后来新加入的超链接，也能触发事件。