使用事件委派
Prev Chapter 9. 性能调优的最佳实践 Next

使用事件委派

事件委派让你可以给一个容器元素(如一个无序列表)绑定事件处理器, 而不需给容器内每个元素(如列表中的一项)都去绑定。jQuery 提供 $.fn.live 和 $.fn.delegate 使实现起来变得很简单。你应该尽量使用 $.fn.delegate 而不是 $.fn.live,因为它消除了那些不必要的选择过滤过程, 而且其明确的上下文(相对于 $.fn.live 的上下文是 document 来说的)减少了大约 80% 的开销。

除了有性能提升的好处,事件委派也使你在往容器里添加新元素时无需重新绑定事件, 因为已经有了。

// 如果列表里面元素很多,不堪想象
$('li.trigger').click(handlerFn);

// 这样写好一点,用 $.fn.live 做事件委派
$('li.trigger').live('click', handlerFn);

// 最好的做法,用 $.fn.delegate 做事件委派,还可以指定一个上下文
$('#myList').delegate('li.trigger', 'click', handlerFn);

Copyright Rebecca Murphey, released under the Creative Commons Attribution-Share Alike 3.0 United States license.


Prev Up Next
优化选择器 Home 先将元素 detach 出来再操作