Javascript- removeEventListener不应用于数组，从之前的addEventListener添加

Javascript- removeEventListener not applied to array, from previous addEventListener added with for loop

本文关键字：addEventListener 添加 removeEventListener 应用于数组 Javascript- 更新时间：2023-09-26

我已经对这个问题进行了很多思考和故障排除，但无法看到错误在哪里。

我有一些代码，添加一个点击事件监听器到一堆div。使用for循环添加事件侦听器，该循环按预期应用。

然后，在使用了单击事件之后，我想删除事件侦听器，使用另一个for循环，令人惊讶的是它不起作用。

这是我的js代码:

var divElems = document.querySelectorAll(".circle");
for(var i=0; i < divElems.length; i++) {
    divElems[i].addEventListener("click", circleClicked(i), false);
}
... // perform actions with click
function circleClicked(i) {
    return function(){
        console.log("Clicked circle " + i);
    };
}
... 
function removeEvListener() {
    for(var i=0; i < divElems.length; i++) {
        divElems[i].removeEventListener("click", circleClicked(i), false);
    }
}

应该应用于这个html:

<div class="container">
    <div class="circle">Circle 1</div>
    <div class="circle">Circle 2</div>
    <div class="circle">Circle 3</div>
    <div class="circle">Circle 4</div>
    <div class="circle">Circle 5</div>
    <div class="circle">Circle 6</div>
    <div class="circle">Circle 7</div>
    <div class="circle">Circle 8</div>
    <div class="circle">Circle 9</div>
    <div class="circle empty"></div>
    <div class="circle empty"></div>
</div>

removeEvListener函数在代码中作为回调应用，作为选项对象的一部分:{option1: "value1", option2: value2, onComplete: removeEvListener}

我试着只使用参考，也用括号removeEvListener()，不工作。

添加到事件侦听器的函数接受与索引相关的输入，索引用于标识被单击的实际div。

请帮忙!

这是因为removeEventListener引用了事件处理程序函数。在您的示例中，函数circleClicked每次调用时都会创建一个新函数，因此您不能将其传递给removeEventListener。

有两个解决方案:

将对事件侦听器的引用存储在数组中(丑)

data-

//编辑

divElems包含所有可单击的元素，因此在单击处理程序中，您可以只检查被单击元素的索引。为了能够轻松地处理这个问题，您可以将NodeList divElems转换为数组

var divElementsArray = Array.prototype.slice.call(divElems);
function clickHandler(e) {
    // e parameter is the click event object, 
    // it has currentTarget property which would be a reference to the div element
    var index = divElementsArray.indexOf(e.currentTarget);
    console.log("Clicked circle's index: " + index);
}

没有找到相关文章