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

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


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

使用 body 作为委托

为获得最佳性能,请在尽可能靠近目标元素的文档位置附加委托事件。避免过度使用 documentdocument.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 后绑定处理程序,你也不必使用事件委托方法。(如果添加的动态内容不经常删除/重新添加)