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它使它创建元素并自动注册标准事件处理程序。）

在javascript事件委托中使用循环

1 个答案: