Как удалить обработчик событий js

Метод EventTarget.removeEventListener()

Удаляет обработчик события, который был зарегистрирован при помощи EventTarget.addEventListener() . Обработчик определяется типом события, самой функцией обработки события, и дополнительными параметрами, переданными при регистрации обработчика.

Синтаксис

target.removeEventListener(type, listener[, options]); target.removeEventListener(type, listener[, useCapture]);

Параметры

Строка, описывающая тип события, которое нужно удалить.

EventListener (en-US) функция, которую нужно удалить с элемента.

Объект опций, описывающий характеристики обработчика события. Доступные опции:

capture : Boolean . Указывает на то, что события этого типа отправляются данному обработчику до того, как происходит их передача любым EventTarget , находящимся ниже него в дереве DOM.
passive : Boolean . Указывает на то, что listener никогда не будет вызывать preventDefault() . В противном случае (если listener вызовет preventDefault() ), user agent проигнорирует вызов и сгенерирует предупреждение в консоли.

Указывает, был ли удаляемый EventListener (en-US) зарегистрирован как перехватывающий обработчик, или нет. Если этот параметр отсутствует, предполагается значение по умолчанию: false .

Если обработчик был зарегистрирован дважды, один раз с перехватом (с capture ) и один — без, каждый из них должен быть удалён по отдельности. Удаление перехватывающего обработчика никак не затрагивает неперехватывающую версию этого же обработчика, и наоборот.

Примечание: useCapture требуется в большинстве основных браузеров старых версий. Если вы хотите поддерживать большую совместимость, вы всегда должны использовать параметр useCapture .

Возвращаемое значение

Поиск обработчика при удалении

В большинстве браузеров помимо типа события и функции важно лишь совпадение значений параметра useCapture / options.capture , но так как это поведение не закреплено стандартом, наилучшим способом будет указание для removeEventListener() в точности тех же параметров, что были переданы в addEventListener() .

Примечания

Если EventListener (en-US) был удалён из EventTarget в процессе обработки события (например предшествующим EventListener (en-US) того же типа), он не будет вызван. После удаления, EventListener (en-US) не будет вызываться, однако его можно назначить заново.

Вызов removeEventListener() с параметрами, не соответствующими ни одному зарегистрированному EventListener (en-US) в EventTarget , не имеет никакого эффекта.

Пример

Это пример добавления и последующего удаления обработчика событий.

var div = document.getElementById("div"); var listener = function (event)  /* do something here */ >; div.addEventListener("click", listener, false); div.removeEventListener("click", listener, false);

Совместимость с браузерами

BCD tables only load in the browser

Gecko примечания

В версиях Firefox младше версии 6 браузер бросает исключение, если параметр useCapture не был явно указан как false. В Gecko младше 9.0, addEventListener() бросает исключение, если параметр listener равен null ; в настоящее время метод отрабатывает без ошибки, но при этом не производит никаких действий.

Opera примечания

В Opera 12.00 параметр useCapture — опциональный (source).

WebKit примечания

Несмотря на то, что WebKit явно добавил » [optional] » к параметру useCapture в Safari 5.1 и Chrome 13, это работало и до изменений.

Спецификация

Полифилы для поддержки старых браузеров

addEventListener() и removeEventListener() отсутствуют в старых браузерах. Это ограничение можно обойти, вставив следующий код в начале ваших скриптов, что позволяет использовать addEventListener() и removeEventListener() в версиях, не поддерживающих эти методы нативно. Тем не менее, этот метод не работает в Internet Explorer версии 7 и ниже, так как расширение Element.prototype не поддерживалось в более ранних версиях Internet Explorer ранее 8.

if (!Element.prototype.addEventListener)  var oListeners = >; function runListeners(oEvent)  if (!oEvent)  oEvent = window.event; > for ( var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId  oEvtListeners.aEls.length; iElId++ )  if (oEvtListeners.aEls[iElId] === this)  for (iLstId; iLstId  oEvtListeners.aEvts[iElId].length; iLstId++)  oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); > break; > > > Element.prototype.addEventListener = function ( sEventType, fListener /*, useCapture (will be ignored!) */, )  if (oListeners.hasOwnProperty(sEventType))  var oEvtListeners = oListeners[sEventType]; for ( var nElIdx = -1, iElId = 0; iElId  oEvtListeners.aEls.length; iElId++ )  if (oEvtListeners.aEls[iElId] === this)  nElIdx = iElId; break; > > if (nElIdx === -1)  oEvtListeners.aEls.push(this); oEvtListeners.aEvts.push([fListener]); this["on" + sEventType] = runListeners; > else  var aElListeners = oEvtListeners.aEvts[nElIdx]; if (this["on" + sEventType] !== runListeners)  aElListeners.splice(0); this["on" + sEventType] = runListeners; > for (var iLstId = 0; iLstId  aElListeners.length; iLstId++)  if (aElListeners[iLstId] === fListener)  return; > > aElListeners.push(fListener); > > else  oListeners[sEventType] =  aEls: [this], aEvts: [[fListener]] >; this["on" + sEventType] = runListeners; > >; Element.prototype.removeEventListener = function ( sEventType, fListener /*, useCapture (will be ignored!) */, )  if (!oListeners.hasOwnProperty(sEventType))  return; > var oEvtListeners = oListeners[sEventType]; for ( var nElIdx = -1, iElId = 0; iElId  oEvtListeners.aEls.length; iElId++ )  if (oEvtListeners.aEls[iElId] === this)  nElIdx = iElId; break; > > if (nElIdx === -1)  return; > for ( var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId  aElListeners.length; iLstId++ )  if (aElListeners[iLstId] === fListener)  aElListeners.splice(iLstId, 1); > > >; >

Смотрите также

EventTarget.addEventListener() .
Non-standard EventTarget.detachEvent() (en-US).

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Как удалить обработчик событий js

Для удаления обработчика событий используется метод removeEventListener() . Первым параметром передаётся тип события, а вторым функция-обработчик:

const div = document.getElementById('div'); const listener = (event) =>  // обработчик события >; div.addEventListener('click', listener); // добавляем обработчик div.removeEventListener('click', listener); // удаляем обработчик

Как удалить обработчик событий js

.removeEventListener() — это метод JavaScript, который позволяет удалить ранее добавленный обработчик событий из элемента на веб-странице. Он используется для того, чтобы перестать слушать события браузера, когда это больше не нужно.

Форма записи

.removeEventListener() имеет следующий синтаксис:

element.removeEventListener(event, function, useCapture);

element
- это элемент на веб-странице, из которого мы хотим удалить обработчик события.
- это строка, представляющая тип события, на которое мы реагируем (например, ‘click’, ‘mouseover’, ‘keydown’ и т.д.).
- это функция-обработчик, которую мы хотим удалить.
- это опциональный параметр, который указывает, был ли обработчик вызван на этапе перехвата (true) или на этапе всплытия (false). По умолчанию значение useCapture равно false.
Описание работы

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

Пример использования .removeEventListener() для удаления обработчика клика на кнопке:
```
const button = document.querySelector('button'); const handleClick = function() < console.log('Кнопка нажата!'); >; button.addEventListener('click', handleClick); // Через некоторое время удаляем обработчик клика setTimeout(function() < button.removeEventListener('click', handleClick); >, 5000);
```
В данном примере мы добавляем обработчик клика на кнопку с помощью метода .addEventListener() , а затем удаляем его через 5 секунд с помощью метода .removeEventListener() . Функция-обработчик выводит сообщение в консоль при клике на кнопку.

Заключение

.removeEventListener() — это метод JavaScript, который позволяет удалить ранее добавленный обработчик событий из элемента на веб-странице. Он используется для того, чтобы перестать слушать события браузера, когда это больше не нужно. Корректное использование .removeEventListener() может помочь улучшить производительность и уменьшить использование ресурсов.

Метод removeEventListener – Как удалить обработчик события?

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

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

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

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

Сначала рассмотрим ситуацию, когда обработчик срабатывает каждый раз при возникновении события.
```
     JavaScript    https://www.youtube.com/   
```
```
'use strict'; // Получаем доступ к первой кнопке const btn = document.querySelector('button'); // Функция-обработчик const deleteElement = () => < alert('Click'); >// Назначаем событие и Функцию-обработчик btn.addEventListener('click', deleteElement); 
```
Результат в Браузере

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

Метод removeEventListener

Теперь при помощи метода removeEventListener удалим обработчик события сразу после того, как событие возникло.
```
'use strict'; // Получаем доступ к первой кнопке const btn = document.querySelector('button'); // Функция-обработчик const deleteElement = () => < alert('Click'); btn.removeEventListener('click', deleteElement); // Удаляем обработчик >// Назначаем событие и Функцию-обработчик btn.addEventListener('click', deleteElement); 
```
Результат в Браузере

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

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.

site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов

site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

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

Метод write() объекта document

Добавление элементов в массив

Метод addEventListener — Позволяет назначить несколько событий

Удаление элементов из Массива

Практическая задача – Удаление и добавление элементов в массив

Свойство onload — Функция обратного вызова — Обработчик событий

Событие щелчок мыши — Свойство onclick и атрибут onclick

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.

site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов

site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

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

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

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

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

Пожалуйста. Спасибо и Вам
Похожие публикации: