«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript



Игра «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих



Метод 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

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

JavaScript-код

'use strict';

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

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

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

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

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



Читайте также...



Отзывы и комментарии:

Добавил(а): Роман
Дата: 2022-01-12

Спасибо вам за все ваши материалы они мне очень помогли повторить и систематизировать знания и познать новые моменты !!! Удачи и всех благ Вам !!!

Добавил: Admin
Дата: 2022-01-16

Пожалуйста. Спасибо и Вам

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 4

Тематические публикации
Популярные заметки
Последние заметки