栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

是否所有jquery事件都应绑定到$(document)?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

是否所有jquery事件都应绑定到$(document)?

否-不应将所有委托的事件处理程序绑定到该

document
对象。这可能是您可能创建的性能最差的方案。

首先,事件委托并不能总是使您的代码更快。在某些情况下,这是有利的,而在某些情况下则不是。当您实际需要事件委托并从中受益时,应该使用事件委托。否则,您应该将事件处理程序直接绑定到事件发生的对象,因为这样通常会更有效。

其次,您不应在文档级别绑定所有委托事件。这正是

.live()
被弃用的原因,因为当您以这种方式绑定许多事件时,效率非常低。对于委托事件处理,将它们绑定到非动态的最接近的父级要高效得多。

第三,不是所有事件都能奏效或所有问题都可以通过委托解决。例如,如果要拦截输入控件上的键事件并阻止将无效键输入到输入控件中,则不能使用委托事件处理来执行此操作,因为到事件冒泡到委托处理程序时,它已经已由输入控件处理,现在来影响该行为为时已晚。

在某些情况下,需要进行事件委派或有利于进行事件委派:

  • 当您要捕获事件的对象被动态创建/删除时,您仍然希望捕获其上的事件,而不必在每次创建新对象时都显式重新绑定事件处理程序。
  • 当您有许多都需要完全相同的事件处理程序的对象时(其中很多至少为数百个)。在这种情况下,在安装时绑定一个委托事件处理程序可能比绑定数百个或更多个直接事件处理程序更有效。注意,委托事件处理在运行时总是比直接事件处理程序效率低。
  • 当您试图捕获(在文档中的更高级别)文档中任何元素上发生的事件时。
  • 当您的设计明确使用事件冒泡和stopPropagation()解决页面中的某些问题或功能时。

为了进一步了解这一点,需要了解jQuery委托事件处理程序的工作方式。当您调用类似这样的内容时:

$("#myParent").on('click', 'button.actionButton', myFn);

它将在

#myParent
对象上安装通用jQuery事件处理程序。当click事件冒泡到此委托事件处理程序时,jQuery必须遍历附加到此对象的委托事件处理程序列表,并查看事件的原始元素是否与委托事件处理程序中的任何选择器匹配。

因为选择器可以相当广泛地参与其中,所以这意味着jQuery必须解析每个选择器,然后将其与原始事件目标的特征进行比较,以查看它是否与每个选择器匹配。这不是一个便宜的操作。如果只有一个选择器,这没什么大不了的,但是如果将所有选择器放在文档对象上,并且有数百个选择器要与每个冒泡事件进行比较,这会严重影响事件处理性能。

因此,您需要设置委托事件处理程序,以使委托事件处理程序尽可能接近目标对象。这意味着更少的事件将在每个委派的事件处理程序中冒泡,从而提高了性能。将所有委托事件放在文档对象上是最糟糕的性能,因为所有冒泡事件都必须经过所有委托事件处理程序并针对所有可能的委托事件选择器进行评估。这就是为什么

.live()
不赞成这样
.live()
做的原因,因为这样做是事实,并且事实证明效率很低。


因此,要实现优化的性能:

  1. 仅在实际提供所需功能或提高性能时才使用委托事件处理。不要总是使用它,因为它很容易,因为当您实际上不需要它时。实际上,它在事件分发时的性能要比直接事件绑定差。
  2. 尽可能将委派的事件处理程序附加到与事件源最近的父级。如果使用委派事件处理是因为您具有要为其捕获事件的动态元素,请选择本身不是动态的最接近的父级。
  3. 对委托的事件处理程序使用易于评估的选择器。如果您遵循委托事件处理的工作原理,您将了解必须多次将委托事件处理程序与许多对象进行比较,因此,选择效率尽可能高的选择器或向对象添加简单的类,以便可以使用更简单的选择器提高委托事件处理的性能。


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/442024.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号