如何覆盖 addEventListener 中的函数? [英] How can I overwrite a function in addEventListener?

问题描述

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

In my application, there are several buttons which trigger my function loadObj(a). This function mainly loads the corresponding 3D object using the Three.js library.

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

When I choose a object and click the corresponding button, a set of three extra buttons appear which allow me to load three variations of the selected object. The code below already works for this scenario using addEventListener.

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

My problem arises when I select a different object, which triggers the code below again. Then, if I click one of the extra buttons for the newly selected object, it loads the correct object, but it also loads the previous one. If I choose a third object, if I click one of the extra buttons, it will not load just the corresponding object, but the previous two as well.

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

I have read that addEventListener works in a cumulative manner, where the functions just keep being added up. So, everytime it runs the loop below, it adds a new loadObj with the path of the new model to any other previous loadObj.

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

Is there any way to overwrite a function inside addEventListener? I need the previous loadObj to be removed from addEventListener before adding the new one.

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

推荐答案

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

If you run that loop every time you click the button, it's adding an event listener on every run. That's why you keep getting more and more items each time--you keep adding more functions.

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

Instead of trying to dynamically add new event listeners on dynamically added buttons, you can delegate your event listening to a parent element that is a direct ancestor of all of the buttons. Then you have a single event listener that works for all of your buttons without any extra effort. You just check to make sure a click is from the right type of element and then you can get any relevant information directly from that element (via data- or other attributes on the event object target).

这篇关于如何覆盖 addEventListener 中的函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！