Aquí está el detector de eventos que estoy usando:
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)); });El problema es que no puedo eliminar el oyente, usé algo como esto sin suerte:
removeIT = () => { words.forEach(word => { window.removeEventListener("keypress", eventHandler.bind(null, word)); }); }¿Cómo puedo eliminar los listers de manera efectiva?
Si desea continuar con este patrón, deberá almacenar referencias a cada función enlazada e iterar sobre ellas para eliminar los oyentes.
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); }); } El fragmento a continuación está adjuntando oyentes de click a botones, por lo que también es necesario almacenar el elemento al que está adjunto el oyente, pero en su caso, dado que está adjuntando a la ventana, no será necesario. Básicamente, en el ciclo en el que está adjuntando los oyentes, cree su función enlazada y asígnela a una variable, adjunte su oyente con ella, luego empújela a una matriz que se puede usar para eliminar los oyentes más tarde.
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>No creo que tenga que ser tan complicado. Si llama a una función que devuelve un cierre que actúa como oyente, no necesita ningún enlace.
Tuve que usar botones aquí porque no sé cómo es su marcado.
const buttons = document.querySelectorAll('button'); function handleClick() { console.log(this); } function removeAllListeners(buttons) { buttons.forEach(button => { button.disabled = true; button.removeEventListener('click', handleClick); }); } function handler(word) { console.log(word); return handleClick; } buttons.forEach(button => { const { textContent } = button; button.addEventListener('click', handler(textContent), false); }); setTimeout(removeAllListeners, 5000, buttons); button { background-color: #efefef; cursor: pointer; } button:disabled { background-color: #ffb3b3; cursor: default; } <button>Tree</button> <button>Giant</button> <button>Billy Joel</button>