javascript - 我应该将我的 .on ('click' ) 事件附加到文档或元素吗

标签 javascript jquery jquery-events

昨天我正在阅读关于 .on() 的 jQuery 文档,其中指出:

Avoid excessive use of document or document.body for delegated events on large documents

但是今天,我正在看这个 JSPERF当点击事件附加到文档时,我注意到性能更好。

所以现在,我很困惑。性能测试与文档背道而驰?

最佳答案

此处的 JSPerf 正在测试附加事件的速度,而不是它们对累积页面性能的影响。这是测试错误的东西!

Javascript 事件在 DOM 中一直传播到文档根目录。这意味着如果您在 document 上有一个 on("click", ...) 处理程序,那么每次点击 文档中的元素 最终将运行一个事件处理程序,因此 jQuery 可以测试它的来源是否与委托(delegate)目标匹配,以查看它是否应该传递给该事件处理程序。

假设您的页面在文档上有 10 个不同的委托(delegate)事件处理程序,所有事件处理程序都处理各种点击。每次单击页面中的任何元素时,事件都会冒泡到文档根目录,并且必须测试所有 10 个处理程序以确定应该运行哪个(如果有的话)。

通常,您希望委托(delegate)事件在树中尽可能深,同时仍然启用您的功能,因为这限制了可以调用此事件的元素数量,并且您可以更早地处理事件以防止它发生向上传播 DOM 树。

关于javascript - 我应该将我的 .on ('click' ) 事件附加到文档或元素吗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17443281/

相关文章:

Javascript window.location 搜索 "#"永远不会返回 true

jquery - Highcharts 轴上的单击事件

javascript - jsrender 模板不会渲染,有什么想法吗?

javascript - jquery 可排序 ('toArray' ) 仅当元素属于另一个数组时

javascript - 尝试使用 bootstrap 时出现 meteor 抛出错误

jquery - 使用/jQuery 避免在页面刷新时提交表单

jquery:tr内td的序号

javascript - 修改复选框change()事件以等待其他操作

javascript 代码只适用于 mozilla firefox?

javascript - 如何在 React Native 中加载 Web Assembly 脚本?