JS метод Element.removeEventListener()

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

Метод removeEventListener() видаляє обробник події, раніше доданий за допомогою методу addEventListener() або події, прив'язаної безпосередньо до властивості on... елемента. Цей метод дозволяє керувати прослуховуванням подій та уникати витоків пам'яті, що можуть виникнути через накопичення непотрібних обробників подій. Він широко застосовується в різноманітних сценаріях взаємодії з користувачем, таких як керування подіями натискання кнопок, обробка подій введення даних та інших користувацьких дій.

Метод removeEventListener() приймає три аргументи: type, listener та options. Аргумент type є рядком, що визначає тип події, обробник якої потрібно видалити, наприклад, "click" або "keydown". Аргумент listener - це функція-обробник події, яку потрібно видалити. Нарешті, аргумент options є необов'язковим об'єктом, що містить властивості, такі як capture та once, які визначають, як обробник був доданий раніше.

Розглянемо простий приклад використання removeEventListener():

const button = document.querySelector('button');
const handleClick = () => {
  console.log('Button clicked!');
  button.removeEventListener('click', handleClick);
};

button.addEventListener('click', handleClick);

У цьому прикладі ми додаємо обробник події handleClick до елемента button за допомогою addEventListener('click', handleClick). Функція handleClick виводить повідомлення в консоль та видаляє себе як обробник події за допомогою button.removeEventListener('click', handleClick). Таким чином, після першого натискання кнопки, обробник буде видалено, і подальші натискання не матимуть жодного ефекту.

Метод removeEventListener() часто використовується в комбінації з addEventListener() для динамічного керування подіями. Наприклад, можна додавати та видаляти обробники подій у відповідь на певні умови або користувацькі дії. Це особливо корисно в складних додатках, де потрібно оптимізувати використання пам'яті та уникати витоків ресурсів.

Ось більш складний приклад, що демонструє використання removeEventListener() з опціями:

const form = document.querySelector('form');
const handleSubmit = (event) => {
  event.preventDefault();
  // Обробка форми
  form.removeEventListener('submit', handleSubmit, { once: true });
};

form.addEventListener('submit', handleSubmit, { once: true });

У цьому прикладі ми додаємо обробник події handleSubmit до форми за допомогою form.addEventListener('submit', handleSubmit, { once: true }). Опція { once: true } вказує, що обробник має бути видалений автоматично після першого виклику. Всередині функції handleSubmit ми явно видаляємо обробник за допомогою form.removeEventListener('submit', handleSubmit, { once: true }), використовуючи ті самі опції, що й під час додавання обробника.

Важливо пам'ятати, що під час використання removeEventListener() потрібно бути обережним, щоб не видалити обробники подій, які ще потрібні. Також слід уникати ситуацій, коли обробник події видаляється до того, як він був викликаний, оскільки це може призвести до небажаної поведінки додатку.

Загалом, метод removeEventListener() є потужним інструментом для керування подіями в JavaScript, що дозволяє динамічно додавати та видаляти обробники подій, забезпечуючи гнучкість та ефективність додатків. Його правильне використання разом з addEventListener() допомагає створювати інтерактивні та відгукливі веб-додатки.

правити

Порада

Якщо потрібно видалити всі обробники певного типу події з елемента, можна використати метод cloneNode() та replaceChild() для створення нового екземпляра елемента без жодних прикріплених обробників. Це може бути корисним у ситуаціях, коли важко відстежити всі додані обробники.

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

Порада

Під час використання removeEventListener(), переконайтеся, що аргументи type і listener точно відповідають тим, що були використані під час додавання обробника за допомогою addEventListener(). Навіть незначна відмінність у рядку type або посиланні на функцію listener призведе до того, що обробник не буде видалено.

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

Порада

Використовуйте removeEventListener() обережно в обробниках подій, які можуть бути викликані кілька разів, наприклад, при обробці подій прокрутки або переміщення миші. Якщо видалити обробник занадто рано, це може призвести до втрати функціональності додатку. Краще видаляти обробники в окремих функціях або в місцях, де ви маєте повний контроль над їх життєвим циклом.

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

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

Синтаксис

removeEventListener(type, listener)
removeEventListener(type, listener, options)
removeEventListener(type, listener, useCapture)

Параметри

type

Рядок, який вказує тип події, для якої потрібно видалити обробник події.

автор: Bond

правити

listener

Функція-обробник події, яку потрібно видалити з цілі події.

автор: Bond

правити

options

Об'єкт опцій, який визначає характеристики обробника події.

автор: Bond

правити

useCapture

Логічне значення, яке вказує, чи був обробник події, який потрібно видалити, зареєстрований як обробник, що перехоплює події, чи ні.

автор: Bond

правити

Повернення

none

Повертає undefined.

автор: Bond

правити

Переглядачі

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

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

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

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

Переглядач
	4.4	18	4	1

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

Переглядач
	14.5.0	1.0

Приклади

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

<button>Натисни</button>

const button = document.querySelector('button');

function handleClick() {
  console.log('Button clicked!');
}

button.addEventListener('click', handleClick);

// Пізніше, коли обробник події більше не потрібний
button.removeEventListener('click', handleClick);

<form>
    <label>Ім'я: <input type="text" name="name"></label>
    <button type="submit">Надіслати</button>
</form>

const form = document.querySelector('form');

function handleSubmit(event) {
  event.preventDefault();
  console.log('Form submitted!');
}

form.addEventListener('submit', handleSubmit);

// Видалити обробник події після 5 секунд
setTimeout(() => {
  form.removeEventListener('submit', handleSubmit);
  console.log('Event listener removed');
}, 5000);