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() допомагає створювати інтерактивні та відгукливі веб-додатки.

Синтаксис

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

Параметри

*type

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

*listener

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

options

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

useCapture

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

Return

none

Повертає undefined.

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

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

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

button.addEventListener('click', handleClick);

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

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);