javascript - 如何覆盖 addEventListener 中的函数？

Question

在我的应用程序中，有几个按钮可以触发我的函数loadObj(a)。该函数主要使用Three.js库加载相应的3D对象。

当我选择一个对象并单击相应的按钮时，会出现一组三个额外的按钮，这些按钮允许我加载所选对象的三个变体。下面的代码已经适用于使用 addEventListener 的这种情况。

当我选择不同的对象时，就会出现问题，这会再次触发下面的代码。然后，如果我单击新选定对象的额外按钮之一，它会加载正确的对象，但也会加载前一个对象。如果我选择第三个对象，如果我单击额外按钮之一，它不会仅加载相应的对象，还会加载前两个对象。

我读到addEventListener以累积的方式工作，其中的函数只是不断地添加。因此，每次运行下面的循环时，它都会添加一个新的 loadObj，其中包含新模型到任何其他先前的 loadObj 的路径。

有没有办法覆盖addEventListener内部的函数？在添加新的之前，我需要从 addEventListener 中删除之前的 loadObj。

    //Solve the scope/closure problem to able to call loadDress inside the "for" loop below
    function delegate(a) {
       return function(){
          loadObj(a)
       }
    }

    for(var item in paths){
       document.getElementById("size" + item).style.display = "inline-block";
       document.getElementById("size" + item).addEventListener("click", delegate(paths[item]), false);
    }

Answer 1

如果每次单击按钮时都运行该循环，则每次运行时都会添加一个事件监听器。这就是为什么您每次都会获得越来越多的项目 - 您会不断添加更多功能。

您可以将事件监听委托(delegate)给作为所有按钮的直接祖先的父元素，而不是尝试在动态添加的按钮上动态添加新的事件监听器。然后，您就拥有了一个适用于所有按钮的事件监听器，无需任何额外的工作。您只需检查以确保点击来自正确类型的元素，然后就可以直接从该元素获取任何相关信息(通过事件对象目标上的数据或其他属性)。