jQuery 事件处理 3 - bind、live 及 delegate 的区别

之前说过,绑定事件可以用 bind() 方法,实际上 jQuery 还有另外两种事件绑定方法: livedelegate。它们都有什么区别呢?

bind()

$('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 之类的父节点,只要事件能冒泡到上面,即使是后来新加入的超链接,也能触发事件。

via http://jqfundamentals.com

Posted on 2012-03-07

1 Comment

  • pnim pnim over 5 years ago

    live 似乎被抛弃了

Leave a Comment