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之前,文档元素在文档的头部是可用的,所以在那里附加事件而不等待文档准备就绪是安全的。
默认情况下,大多数事件从原始事件目标向上滚动到文档元素。

这是关于速度!

身体VS-document.png

从这个jsperf使用文档可以看出,比使用body作为事件委托更快。

身体VS-document2png

.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

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页