Далее на странице...
Метод 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
Спасибо вам за все ваши материалы они мне очень помогли повторить и систематизировать знания и познать новые моменты !!! Удачи и всех благ Вам !!!