从 for 循环中移除 eventListener

Question

我正在尝试删除我在 for 循环中添加的事件侦听器，但它不起作用

有没有办法用纯 js 做到这一点？

for (let i = 0; i < drumPads.length; i++) {
    drumPads[i].addEventListener("click", func)
    function func() {
      display.innerHTML = music[i][0];
      sound.src = music[i][1];
      sound.play();
    }
}

Answer 1

你的函数 func 应该在循环外定义。

在您的代码中，函数 func 是块作用域的，因此当用户以“开”和“关”条件输入时，它不会引用相同的内存。

您可以通过设置目标的 dataset 将索引和一些自定义数据从目标传递到监听器函数。

let drumPads = document.getElementsByClassName("drum-pads");

function Power(a) {
  for (let i = 0; i < drumPads.length; i++) {
    if (a === 'on') {
      drumPads[i].dataset.index = i;
      drumPads[i].addEventListener("click", func);
    } else {
      drumPads[i].removeEventListener("click", func);
    }
  }
}

function func(e) {
  const targetIndex = e.currentTarget.dataset.index;
  console.log('Triggered listner', targetIndex);
}

<div>
  <button class="drum-pads">drum-pads 1</button>
  <button class="drum-pads">drum-pads 2</button>
  <button class="drum-pads">drum-pads 3</button>
  <button class="drum-pads">drum-pads 4</button>
</div>
<div>
  <button onclick="Power('on')">Toggle On</button>
  <button onclick="Power('off')">Toggle Off</button>
</div>

从 for 循环中移除 eventListener

remove eventListener from for loop

javascript

for-loop