jQuery $('document').on() 比 $('body').on() 速度快
作者:admin 时间:2021-8-2 10:37:20 浏览: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 后绑定处理程序,你也不必使用事件委托方法。(如果添加的动态内容不经常删除/重新添加)
标签: JQuery
- 站长推荐