删除带有额外参数的事件侦听器

莎拉·瑞

这是我正在使用的事件侦听器：

const eventHandler = (word, e) => {
    if(isAnimating && duplicates.includes(word.innerHTML)) return; 
    if(String.fromCharCode(e.which) == word.innerHTML && !distWords.includes(word)) {
        move(word);
    } 
}
words.forEach(word => {
    window.addEventListener("keypress", eventHandler.bind(null, word));
});

问题是我无法删除监听器，我使用了这样的东西，但没有运气：

removeIT = () => {
        words.forEach(word => {
            window.removeEventListener("keypress", eventHandler.bind(null, word));
        }); 
}

如何有效地删除listers？

沙丁鱼

如果您想继续使用此模式，您将需要存储对每个绑定函数的引用并遍历它们以删除侦听器。

const words_listeners = [];

words.forEach(word => {
    const handler = eventHandler.bind(null, word);
    window.addEventListener("keypress", handler);
    words_listeners.push(handler);
});  

removeIT = () => {
    words_listeners.forEach(handler => {
        window.removeEventListener("keypress", handler);
    }); 
}

下面的代码片段将click侦听器附加到按钮，因此还需要存储侦听器所附加的元素，但在您的情况下，由于您附加到窗口，因此不需要。基本上，在您附加侦听器的循环中，创建绑定函数并将其分配给一个变量，用它附加您的侦听器，然后将其推送到一个可用于稍后删除侦听器的数组。

const buttons = document.querySelectorAll('.word')
const word_listeners = [];

const eventHandler = (word, e) => {
    console.log(word)
}

buttons.forEach(button => {
    const handler = eventHandler.bind(null, button.textContent);
    button.addEventListener('click', handler);
    word_listeners.push([button, handler]);
}); 

function remove_listeners() {
  word_listeners.forEach(([button, handler]) => button.removeEventListener('click', handler));
}

document.getElementById('remove').addEventListener('click', remove_listeners);

<button type="button" class="word">One</button>
<button type="button" class="word">Two</button>
<button type="button" class="word">Three</button>

<button type="button" id="remove">Remove listeners</button>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。