在 jQuery 中侦听文档级别的事件有什么缺点吗？答案

【问题标题】：Are there any drawbacks to listen events on document level in jQuery?在 jQuery 中侦听文档级别的事件有什么缺点吗？
【发布时间】：2013-05-05 10:47:42
【问题描述】：

要监听元素上的事件，我认为是在文档级别监听：

$(document).on('click', '.myclass', function() {/*do something*/});

比在元素级别上监听的样式更好：

$('.myclass').on('click', function() { /*do something*/ });

原因是第一种样式也可以应用于动态添加的新元素。你还可以看到这种风格在 Bootstrap 中被大量使用：https://github.com/twitter/bootstrap/blob/master/js/bootstrap-alert.js

我想广泛使用第一种样式。但我想知道这种风格是否有任何缺点，比如性能？

【问题讨论】：

第二个也适用于动态添加的元素，但仅适用于 .myclass 元素中的元素。
@roasted: no, seems to work for dynamically-added elements too，只要它们在.myclass元素内。
您可能想阅读stackoverflow.com/a/1688293/218196，尽管这主要列出了好处。
@DavidThomas 你是对的，我误解了你的说法
@DavidThomas，如果一个新的.myclass 添加到 DOM 中，似乎不能被解雇。我之前是指这种问题，所以我想切换。

标签： jquery jquery-events

【解决方案1】：

来自可用的 jQuery 文档here：

活动表现

在大多数情况下，click 之类的事件很少发生，性能不是一个重要问题。但是，mousemove 或 scroll 等高频事件每秒可以触发数十次，在这些情况下，明智地使用事件变得更加重要。可以通过减少处理程序本身完成的工作量、缓存处理程序所需的信息而不是重新计算它，或者通过使用setTimeout 限制实际页面更新的数量来提高性能。

在文档树顶部附近附加许多委托事件处理程序会降低性能。每次事件发生时，jQuery 必须将该类型的所有附加事件的所有选择器与从事件目标到文档顶部的路径中的每个元素进行比较。为了获得最佳性能，请将委托事件附加到尽可能靠近目标元素的文档位置。避免过度使用document 或document.body 来处理大型文档上的委派事件。

当用于过滤委托事件时，jQuery 可以非常快速地处理tag#id.class 形式的简单选择器。所以，"#myForm"、"a.external" 和 "button" 都是快速选择器。使用更复杂的选择器（尤其是分层选择器）的委托事件可能会慢几倍——尽管对于大多数应用程序来说它们仍然足够快。通常可以通过将处理程序附加到文档中更合适的点来避免分层选择器。例如，不要使用$("body").on("click", "#commentForm .addNew", addComment)，而是使用$("#commentForm").on("click", ".addNew", addComment)。

【讨论】：

【解决方案2】：

如果.myclass 是在您的文档中动态添加的，这就是您的首选

$(document).on('click', '.myclass', function() {/*do something*/});

为了提高效率，考虑一下 - （因为您想广泛使用第一种样式）

<div class='parentClass'>
   <div class='myclass'></div>  // <-- added dynamically
</div>

你可以这样做 -

$('.parentClass').on('click', '.myclass', function() {/*do something*/});

查看 Api 文档 - http://api.jquery.com/on/

【讨论】：

【解决方案3】：

直接在元素本身上附加点击处理程序的另一个优点是，Android 似乎更喜欢这样。当触摸具有点击处理程序的元素时，移动浏览器会给出一个轻微的提示，表明某些东西已经被激活，而当处理程序附加到另一个元素时它不会这样做。

它似乎工作起来也更加稳定。

【讨论】：