用新的jQuery函数.on()替换.live(),我已经看到了几种使用它的方法。 在这里,我看一下在事件委托中使用主体或文档作为绑定元素之间的主要区别。 如果您是事件委托的新成员,则提供了将事件附加到尚未创建的元素的方法,并且在将事件附加到相同类型的多个元素时开销也较低。 有关更多信息,以及如果您不知道为什么不推荐使用.live()的话,请查看jQuery .live()与.on()review 。
大多数浏览器事件从文档中最深的最内层元素(事件目标)起泡或传播,一直发生到主体和文档元素。 在Internet Explorer 8及更低版本中,诸如change和Submit之类的一些事件本身并不是冒泡的,但是jQuery修补了这些事件以冒泡并创建一致的跨浏览器行为。
资料来源: http : //api.jquery.com/on/
以body为代表
为了获得最佳性能,请在尽可能靠近目标元素的文档位置附加委托事件。 避免在大型文档上的委托事件中过度使用document或document.body。
HTML处理拖放事件:
$('body').on('dragover', filesDragged).on('drop', filesDropped);
使用文档作为委托
在加载任何其他HTML之前,文档元素位于文档的开头,因此可以在其中附加事件而不必等待文档准备就绪。
默认情况下,大多数事件会从原始事件目标冒泡到文档元素。
都是关于速度!?
从此jsperf中可以看出,使用文档比使用body作为事件委托更快。
同样,.on()和.delegate()之间的文档性能更好,但区别不大-后者称为前者。
jQuery源。
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
},
结论
问保罗·爱尔兰。 但是我想并没有太大的区别,我倾向于使用body,因为这是官方jQuery API文档中的内容。
正确用法:
例如,代替:
$("body").on("click", "#commentForm .addNew", addComment)
采用:
$("#commentForm").on("click", ".addNew", addComment).
什么时候应该使用事件委托?
1.当您为需要相同功能的更多元素绑定通用处理程序时。 (例如:表格行悬停)
*在该示例中,如果必须使用直接绑定来绑定所有行,那么最终将为该表中的n行创建n个处理程序。 通过使用委托方法,您最终可以在一个简单的处理程序中处理所有这些操作。
2.当您在DOM中更频繁地添加动态内容时(例如:从表中添加/删除行)
为什么不应该使用事件委托?
1.与将事件直接绑定到元素相比,事件委托要慢一些。
*它会在命中的每个气泡上比较目标选择器,因为它比较复杂,所以比较昂贵。
2.在事件冒泡到达它绑定的元素之前,无法对其进行控制。
PS:即使对于动态内容,如果在将内容插入DOM之后绑定处理程序,则也不必使用事件委托方法。 (如果添加的动态内容不经常删除/重新添加)
进一步阅读:
事件委托是一种在元素实际存在于DOM中之前编写处理程序的技术。 这种方法有其自身的缺点,只有在有这种要求时才应使用。
资料来源: http : //stackoverflow.com/questions/12824549/should-all-jquery-events-be-bound-to-document