JavaScript removeEventListener() — зняти обробник події

Метод removeEventListener() знімає раніше навішений обробник події.

правити

Загальний опис

І тут — найпоширеніша помилка в усьому DOM. Щоб зняти обробник, треба передати ту саму функцію, що й навішували. Не схожу — ту саму, за посиланням.

Тому цей код нічого не зніме:

element.addEventListener('click', () => hide());
element.removeEventListener('click', () => hide());

Це дві різні функції, хоч і виглядають однаково. Обробник лишиться висіти.

Правильно — зберегти функцію в змінну. А якщо навішували з опцією capture: true, її треба вказати й при знятті: інакше знімається «не той» обробник.

правити

Нотатка

Стрілкова функція, написана прямо в дужках, неможливо зняти: посилання на неї ніде не збереглося. Або зберігай у змінну, або бери { once: true } чи { signal }.

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
removeEventListener	1+	1+	1+	7+	12+	9+

Підтримка: мобільні переглядачі

Переглядач
removeEventListener	yes	yes	yes	yes

Приклади

+ запропонувати свій приклад у пісочниці

<div id="demo-element">Демонстраційний елемент</div>

const element = document.getElementById('demo-element');

// НЕ ПРАЦЮЄ: це дві різні функції
element.addEventListener('click', () => hide());
element.removeEventListener('click', () => hide()); // нічого не зняв

// правильно — те саме посилання
const onClick = () => hide();

element.addEventListener('click', onClick);
element.removeEventListener('click', onClick); // знято

// capture треба вказати й при знятті
element.addEventListener('click', onClick, true);
element.removeEventListener('click', onClick, true);

// найнадійніше — сигнал
const controller = new AbortController();
element.addEventListener('click', () => hide(), { signal: controller.signal });
controller.abort();