从数组中删除项目但保留事件侦听器

Question

我有一个添加了相同事件侦听器的项数组，我需要从数组中删除一个特定项，但我想保留事件侦听器。

当然我可以单独添加，但我想知道是否有简单的方法。

Here is a pen to show that. 应该在一段时间后从按钮上移除焦点的功能不会在第三个按钮上执行。

为了更清楚，这里是 JavaScript：

const buttons = [...document.querySelectorAll(".button")];
let dropButton;

for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function () {
        setTimeout(() => { buttons[i].blur(); }, 500);
    });
    
    if(buttons[i].classList.contains("drop")) {
        dropButton = buttons.splice(i, 1);
        i--;
    }
}

感谢您的帮助:)

Answer 1

事件监听器确实保持连接，但是当按下“dropped”按钮时，处理程序会模糊错误的按钮。这是因为您的处理程序通过不再有效的索引访问buttons[i]。

以下是您的处理程序可能的其他三种解决方案：

  // assigning the button to a closure scoped constant
  const b = buttons[i];
  buttons[i].addEventListener("click", function () {
    setTimeout(() => {b.blur();}, 500);
  })

或

// the "this" context in the handler is the button
buttons[i].addEventListener("click", function () {
  setTimeout(() => { this.blur();}, 500);
})

或

// the handler get and event whose "target" key is the button
buttons[i].addEventListener("click", function (event) {
   setTimeout(() => {event.target.blur();}, 500);
})