在Javascript事件委派中使用循环



我有以下代码:

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;
}
});

我在整个项目(单页应用程序)中使用一个事件处理程序。使用属性"来标识事件处理程序;数据点击目标";并防止事件传播";数据传播标志";使用。

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

如果文档很大,并且所选元素离触发事件的元素很远,则委派的事件处理程序可能会很慢。。。来自JQuery文档:

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

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

委托处理程序的具体功能是,即使稍后添加到DOM的新元素也会使用该处理程序,但您真的需要这样吗?如果您不是在写库,而是在写应用程序,那么您可以控制何时添加新元素,从而可以在元素创建中考虑偶数处理程序附件(换句话说,与其有一个只创建新元素的函数,不如让它创建元素并自动注册标准事件处理程序)。

相关内容

  • 没有找到相关文章

最新更新