在 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 的新元素也会使用处理程序，但您真的需要它吗？ 如果您不是在编写库而只是在编写应用程序，那么您可以控制添加新元素的时间，因此您可以将偶数处理程序附件分解到元素创建中（换句话说，不是有一个只创建新元素的函数，而是它以便创建元素并自动注册标准事件处理程序）。