如何覆盖 addEventListener 中的函数？答案

【问题标题】：How can I overwrite a function in addEventListener?如何覆盖 addEventListener 中的函数？
【发布时间】：2017-02-02 05:10:22
【问题描述】：

在我的应用程序中，有几个按钮可以触发我的函数 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);
    }

【问题讨论】：

标签： javascript delegates addeventlistener

【解决方案1】：

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

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

【讨论】：

感谢您的回复。