jquery on_jQuery $('body')。on()与$('document')。on()

jquery on

用新的jQuery函数.on()替换.live(),我已经看到了几种使用它的方法。 在这里,我看一下在事件委托中使用主体或文档作为绑定元素之间的主要区别。 如果您是事件委托的新成员,则它提供了将事件附加到尚未创建的元素的方法,并且在将事件附加到相同类型的多个元素时开销也较低。 有关更多信息,以及如果您不知道为什么不推荐使用.live()的话,请查看jQuery .live()与.on()review

大多数浏览器事件从文档中最深,最内部的元素(事件目标)起泡或传播,一直发生到主体和文档元素。 在Internet Explorer 8及更低版本中,诸如change和Submit之类的一些事件本身并不冒泡,但jQuery修补了这些事件以冒泡并创建一致的跨浏览器行为。

资料来源: http//api.jquery.com/on/

以body为代表

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

HTML处理拖放事件:

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

使用文档作为委托

在加载任何其他HTML之前,document元素在文档的开头可用,因此可以安全地在其中附加事件,而无需等待文档准备就绪。
默认情况下,大多数事件会从原始事件目标冒泡到文档元素。

都是关于速度!?

body-vs-document.png

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

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中更频繁地添加动态内容时(例如:从表中添加/删除行)

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

免费学习PHP!

全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

1.与将事件直接绑定到元素相比,事件委托要慢一些。

*它会比较每个击中的气泡上的目标选择器,因为比较复杂,所以比较昂贵。

2.在事件冒泡到达它所绑定的元素之前,无法对其进行控制。

PS:即使对于动态内容,如果在将内容插入DOM之后绑定处理程序,则也不必使用事件委托方法。 (如果动态添加的内容不经常删除/重新添加)

进一步阅读:

事件委托是一种在元素实际存在于DOM中之前编写处理程序的技术。 此方法有其自身的缺点,只有在有此类要求时才应使用。

资料来源: http : //stackoverflow.com/questions/12824549/should-all-jquery-events-be-bound-to-document

翻译自: https://www.sitepoint.com/jquery-body-on-document-on/

jquery on

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值