jQuery $(‘document’).on() 比 $(‘body’).on() 速度快

jQuery $('document').on() 和 $('body').on() 是两个很常用的方法，它们之间有什么区别呢？在实际编程中我们该如何选择呢？本文介绍一下在事件委托中使用 body 或 document 作为绑定元素之间的主要区别。

$(‘document’).on() 和 $(‘body’).on()

使用 body 作为委托

为获得最佳性能，请在尽可能靠近目标元素的文档位置附加委托事件。避免过度使用 document 或 document.body 来处理大型文档上的委托事件。

HTML 处理拖放事件：

$('body').on('dragover', filesDragged).on('drop', filesDropped);

使用 document 作为委托

在加载任何其他 HTML 之前，文档元素在文档的头部可用，因此可以安全地在那里附加事件，而无需等待文档准备就绪。

默认情况下，大多数事件从原始事件目标冒泡到文档元素。

关于速度

（↑点击图片放大↑）

可以看到，使用 document 比使用 body 作为事件委托要快。

（↑点击图片放大↑）

同样，文档性能更好，但 .on() 和 .delegate() 之间没有太大区别——后者调用前者。

jQuery 源。

delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},

结论

正确用法

使用

$("#commentForm").on("click", ".addNew", addComment).

代替

$("body").on("click", "#commentForm .addNew", addComment)

什么时候应该使用事件委托？

1. 当你为需要相同功能的更多元素绑定一个公共处理程序时。（例如：表格行悬停）

* 在示例中，如果你必须使用直接绑定绑定所有行，你最终会为该表中的 n 行创建 n 个处理程序。通过使用委托方法，你最终可以在 1 个简单的处理程序中处理所有这些。

2. 当你在 DOM 中更频繁地添加动态内容时（例如：从表中添加/删除行）

为什么不应该使用事件委托？

1. 与将事件直接绑定到元素相比，事件委托更慢。

* 它比较它碰到的每个气泡上的目标选择器，比较的代价是昂贵的，因为它很复杂。

2. 无法控制事件冒泡，直到它遇到它所绑定的元素。

PS：即使对于动态内容，如果在内容插入 DOM 后绑定处理程序，你也不必使用事件委托方法。（如果添加的动态内容不经常删除/重新添加）