jQuery $('body').on()vs $('document').on()

原贴地址：https://www.sitepoint.com/jquery-body-on-document-on/

用新的jQuery函数替换.live（）我已经看到了几种不同的方式来使用它。在这里我看看使用body或document作为事件委托中的绑定元素的主要区别。如果你是新的事件委托，它提供了将事件附加到尚未创建的元素的方法，同时将事件附加到同一类型的多个元素也具有较低的开销。有关更多信息，如果您想知道为什么.live（）被弃用，请查看jQuery .live（）与.on（）的评论。

大多数浏览器事件从文档中最深处的最内层元素（事件目标）冒泡或传播，直到文档元素和文档元素。在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