javascript - 添加/删除事件监听器

Question

抱歉，如果这个问题很愚蠢。但我想重构一下我的代码并得到一些建议，但无法真正解决这个问题。我有一个 html 中的 div，其中包含 9 个按钮。像这样:

 <div class="board" id="board">
            <button class="button" id="0"></button>
            <button class="button" id="1"></button>
            <button class="button" id="2"></button>
            <button class="button" id="3"></button>
            <button class="button" id="4"></button>
            <button class="button" id="5"></button>
            <button class="button" id="6"></button>
            <button class="button" id="7"></button>
            <button class="button" id="8"></button>          
    </div>

我想知道是否可以将事件监听器添加到整个容器，然后分别为每个按钮删除它。这样做的要点是按钮只需单击一次。我尝试了这个，但它不起作用:

const buttonsContainer = document.querySelector('.board');

buttonsContainer.addEventListener('click', handleClick);

function handleClick(event){
    const button = event.target;
    console.log(button.id + " was clicked"); 
    button.removeEventListener('click', handleClick);  
}

我寻找解决方案，唯一发现的是设置超时:

setTimeout(() => {
        button.removeEventListener('click', handleClick);
    }, 0);

没明白这个，而且无论如何也行不通。

Answer 1

可以向容器元素添加一个事件监听器，然后分别为每个按钮删除它。

第二个问题是您要从事件处理函数本身内部的按钮中删除事件监听器。这意味着事件监听器仅在第一次单击按钮后被删除，但不会在后续单击中删除。

解决此问题的一种方法是从容器元素而不是按钮中删除事件监听器，然后使用事件检查单击的元素是否为按钮

试试这个:

const buttonsContainer = document.querySelector('.board');

buttonsContainer.addEventListener('click', handleClick);

function handleClick(event) {
    const button = event.target;
    if (button.matches('.button')) {
        console.log(button.id + " was clicked");
        buttonsContainer.removeEventListener('click', handleClick);
    }
}