Блог

Главная - Вопросы по программированию - как удалить EventListener. removeEventListener не работает

как удалить EventListener. removeEventListener не работает

#javascript #dom

#javascript #dom

Вопрос:

У меня есть кнопка «Начать игру», при нажатии на которую запускается игра, и слово на кнопке меняется на «Повторить» — выбирается случайная карта и воспроизводится звук слова карты, и вам нужно угадать, какая это карта. Но когда игра началась, если вы нажмете эту кнопку, то она уже должна работать как повторитель, т.е. чтобы вы могли снова прослушать слово. Как удалить воспроизведение нового слова при нажатии кнопки, и повторить уже озвученное. removeEventListener не работает. когда я нажимаю, он воспроизводит старое и новое слово одновременно

 const startGameBtn = document.getElementById('start-game');
startGameBtn.addEventListener('click', function() { 
  startGameBtn.innerHTML = 'Repeat';
  startGameBtn.classList.add('repeat');  
  startGame(); 
}) 
startGameBtn.removeEventListener('click', function() {
  startGame()
});
function startGame() {
  let randomCard = createRandomCard(); 
  randomCard.querySelector('audio').play(); 
  document.getElementById('category').addEventListener('click', (e) => {
    if(document.body.classList.contains('game-mode')) {
      if(e.target.closest('.card-item') === randomCard) {
        e.target.closest('.card-item').classList.add('checked-card');  
        randomCard = createRandomCard();
        setTimeout(function(){ randomCard.querySelector('audio').play(); }, 2500);  
      } else {
        let error = 'audio/error.mp3';
        playAudio(error)
      }    
    }   
  }) 
  document.querySelector('#start-game').addEventListener('click', function() {
    randomCard.querySelector('audio').play();
  })
}

Комментарии:

1. removeEventListener следует использовать ссылку на ту же функцию, которая используется с addEventListener , иначе она не будет работать.

2. @EmielZuurbier но я удаляю ту же функцию startGame . Или я не понимаю

Ответ №1:

При addEventListener использовании вы используете анонимную функцию, которая вызывает вашу startGame функцию и устанавливает innerHTML класс and на кнопке.

Функция, которую вы используете, removeEventListener также анонимна, и поэтому никогда не может быть той же функцией, которую вы используете addEventListener . Это приведет к removeEventListener тому, что вызов не удалит прослушиватель, потому что он просто не знает, что нужно удалить.

Поэтому создайте ссылку на (не анонимную) функцию и передайте эту ссылку обоим addEventListener и removeEventListener .

 const startGameBtn = document.getElementById('start-game');

// Create reference to function.
const onStartClick = () => {
  startGameBtn.innerHTML = 'Repeat';
  startGameBtn.classList.add('repeat');  
  startGame(); 
};

// Use reference in adding and removing the event listeners.
startGameBtn.addEventListener('click', onStartClick);
startGameBtn.removeEventListener('click', onStartClick);

Что касается остальной части вашего кода, имейте в виду, что всякий раз, когда вы используете функцию addEventListener inside, которая выполняется по щелчку, вы добавляете нового слушателя после каждого щелчка. Это может привести к неожиданному поведению.

Метки: