Удаление обработчика события

Чтобы удалить обработчик события, ранее зарегистрированный с помощью метода addEventListener(), вы используете метод removeEventListener() следующим образом:

element.removeEventListener(type, handler);
Code language: CSS (css)

Предположим, что у вас есть кнопка с классом .btn:

<button class="btn">Register</button>
Code language: HTML, XML (xml)

Ниже определен обработчик события click:

function clickHandler(e) { console.log('Button Clicked'); }
Code language: JavaScript (javascript)

Следующие действия добавляют обработчик события щелчка к событию щелчка кнопки:

const btn = document.querySelector('.btn'); btn.addEventListener('click', clickHandler);
Code language: JavaScript (javascript)

Для удаления обработчика события click из события click кнопки используется метод removeEventListener() следующим образом:

btn.removeEventListener('click', clickHandler);
Code language: JavaScript (javascript)

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

const btn = document.querySelector('.btn'); // add an event listner btn.addEventListener('click', function(e){ console.log('Button Clicked'); }); // this code won't work and has no effect btn.removeEventListener('click', function() { console.log('Button Clicked'); });
Code language: JavaScript (javascript)

Большинство современных веб-браузеров, включая Chrome, Firefox и Edge, поддерживают метод removeEventListener().

IE8 не поддерживает метод removeEventListener(). Вместо него используется метод detachEvent().

Если вам все еще нужно поддерживать IE8, вы можете использовать следующую вспомогательную функцию, которая работает во всех браузерах:

function removeEvent(el, type, handler) { if (el.detachEvent) { el.detachEvent('on' + type, handler); } else { el.removeEventListener(type, handler); } }
Code language: JavaScript (javascript)

Оцените статью
devanswers.ru
Добавить комментарий