Метод removeEventListener

Далее на странице...

Обработчик события срабатывает всегда

Метод removeEventListener

Метод removeEventListener позволяет удалить обработчик события, который был назначен ранее через метод addEventListener.

Метод removeEventListener имеет такой же синтаксис, как и метод addEventListener.

Таким образом в параметрах метода removeEventListener указывается то же событие и та же функция-обработчик, которые передавались при назначении события.

Обработчик события срабатывает всегда

Сначала рассмотрим ситуацию, когда обработчик срабатывает каждый раз при возникновении события.

HTML-код

<!DOCTYPE html>
<html lang="ru">
  <head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>JavaScript</title>
		<link rel="stylesheet" href="css.css">
  </head>
  <body>
        <button id="btn">Нажми меня</button>
		<button >Нажми меня</button>
		<button>Нажми меня</button>

    	<a href="https://www.youtube.com/">https://www.youtube.com/</a>

		<script src="script.js"></script>
  </body>
</html>

JavaScript-код

'use strict';

// Получаем доступ к первой кнопке
const btn = document.querySelector('button');

// Функция-обработчик
const deleteElement = () => {
    alert('Click');
}

// Назначаем событие и Функцию-обработчик
btn.addEventListener('click', deleteElement);

Результат в Браузере

Обработчик срабатывает всегда

Здесь каждый раз при возникновении события, т.е. при клике на 1-ой кнопке, срабатывает обработчик события и появляется модальное окно.

Теперь при помощи метода removeEventListener удалим обработчик события сразу после того, как событие возникло.

JavaScript-код

'use strict';

// Получаем доступ к первой кнопке
const btn = document.querySelector('button');

// Функция-обработчик
const deleteElement = () => {
    alert('Click');
    btn.removeEventListener('click', deleteElement); // Удаляем обработчик
}

// Назначаем событие и Функцию-обработчик
btn.addEventListener('click', deleteElement);

Результат в Браузере

Метод removeEventListener - Удалить обработчик события

Обработчик события срабатывает один раз - при первом клике на кнопке, так как затем при помощи метода removeEventListener обработчик события удаляется.