在 Javascript 事件委托中使用循环

Question

我有以下代码：

var page = document.getElementById("contentWrapper");
page.addEventListener("click", function (e) {
   var target, clickTarget, propagationFlag;      
   target = e.target || e.srcElement;
   while (target !== page) {
      clickTarget = target.getAttribute("data-clickTarget");
      if (clickTarget) {
          clickHandler[clickTarget](e);
          propagationFlag = target.getAttribute("data-propagationFlag");
      }
      if (propagationFlag === "true") {
          break;
      }
      target = target.parentNode;
   }
});

我在整个项目（单页应用程序）中使用单个事件处理程序。事件处理程序使用属性“data-clickTarget”标识，并使用“data-propagationFlag”防止事件传播。

如果 DOM 树很大，我应该使用循环方法还是传统的事件处理程序？

Answer 1

如果文档很大并且所选元素远离触发事件的元素...来自 JQuery 文档：

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

正如文档所说，对于“点击”事件，这可能不会是一个严重的问题（因为用户不会在页面上疯狂点击），但对于鼠标移动或滚动等事件，响应缓慢会变得非常烦人.

委托处理程序的具体特点是，即使后来添加到 DOM 的新元素也会使用该处理程序，但你真的需要这个吗？如果您不是在编写库而只是在编写一个应用程序，那么您可以控制何时添加新元素，因此您可以将偶数处理程序附件分解到元素创建中（换句话说，而不是拥有一个只创建新元素的函数，make以便它创建元素并自动注册标准事件处理程序）。