RemoveEventListener: примеры (JAVASCRIPT)

Краткие примеры использования

Удаление обработчика с булевым параметром capture:

const button = document.querySelector('button');
const handleClick = () => console.log('Клик');
button.addEventListener('click', handleClick, true);
// Удаление с указанием фазы захвата
button.removeEventListener('click', handleClick, true);

// Обработчик удален, клики больше не выводят 'Клик' в консоль

Удаление с использованием объекта options:

const element = document.getElementById('myElem');
const handler = () => {};
element.addEventListener('touchmove', handler, { passive: true });
// Удаление с тем же объектом options
element.removeEventListener('touchmove', handler, { passive: true });

// Пассивный обработчик события touchmove удален

Похожие функции в JavaScript

on[event] свойство — прямая ассигнация обработчика, например, element.onclick = handler. Удаление происходит путем присваивания null. Этот способ менее гибок, так как позволяет иметь только один обработчик на тип события.

jQuery .off() — метод библиотеки jQuery для удаления обработчиков. Может удалять несколько событий, селекторы делегирования. Используется в проектах с подключенным jQuery.

EventTarget.detachEvent() — устаревший метод для Internet Explorer версий до 11. В современной разработке не применяется.

Распространенные ошибки

1. Передача анонимной функции: Невозможно удалить обработчик, если при добавлении была использована анонимная функция, так как ссылка на нее не сохраняется.

element.addEventListener('click', () => console.log('Анонимная функция'));
// Эта попытка удаления не сработает
element.removeEventListener('click', () => console.log('Анонимная функция'));

// Обработчик не удален, так как переданы две разные функции

2. Несоответствие параметров: Параметры capture или options при удалении должны точно совпадать с теми, что были при добавлении.

element.addEventListener('click', handler, true);
element.removeEventListener('click', handler, false); // Не удалит обработчик

// Обработчик останется, так как фаза захвата отличается

История изменений

Основные изменения касаются третьего параметра. В ранних спецификациях использовался только булевый useCapture. Начиная с DOM Level 3 Events, появилась возможность передавать объект options со свойствами capture, passive и once. Современные браузеры поддерживают оба варианта. Спецификация WHATCG DOM Living Standard продолжает развивать этот API, но обратная совместимость сохраняется.

Расширенные примеры

Удаление обработчика, добавленного с флагом once до его срабатывания:

const button = document.querySelector('#onceBtn');
const onceHandler = () => alert('Сработало!');
button.addEventListener('click', onceHandler, { once: true });
// Удаление до клика
button.removeEventListener('click', onceHandler, { once: true });
// Теперь при клике ничего не произойдет

// Обработчик удален, несмотря на флаг once

Работа с делегированием событий и удаление обработчика с объекта options:

const list = document.querySelector('ul');
const handleListClick = (event) => {
    if (event.target.tagName === 'LI') {
        console.log(event.target.textContent);
    }
};
list.addEventListener('click', handleListClick, { capture: false });
// Удаление обработчика делегированного события
list.removeEventListener('click', handleListClick, { capture: false });

// Клики по элементам списка больше не выводят текст

Удаление обработчика, прикрепленного к объекту window, с указанием passive:

const scrollHandler = () => console.log('Скролл');
window.addEventListener('scroll', scrollHandler, { passive: true });
// Для удаления необходимо указать passive
window.removeEventListener('scroll', scrollHandler, { passive: true });

// Пассивный обработчик скролла удален

Аналоги в других языках программирования

Python (tkinter): Используется метод unbind для отвязывания обработчиков событий от виджетов.

from tkinter import *
def callback(event):
    print("Клик")
root = Tk()
button = Button(root, text="Кнопка")
button.bind("", callback)
button.unbind("", callback)

# Обработчик отвязан

C# (.NET): Для удаления обработчика используется оператор -=.

button.Click -= new EventHandler(ButtonClickHandler);

// Обработчик ButtonClickHandler удален

В PHP и MySQL отсутствуют прямые аналоги, так как эти языки обычно не работают с событиями на клиенте.