JS метод Object.removeEventlistener()

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

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

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

// Приклад додавання обробника подій
function myEventHandler() {
    // Логіка обробника подій
}

var myElement = document.getElementById("exampleElement");
myElement.addEventListener("click", myEventHandler);

// Видалення обробника подій
myElement.removeEventListener("click", myEventHandler);

У цьому прикладі ми спершу додаємо обробник подій для кліку на елементі з ідентифікатором "exampleElement". Потім ми використовуємо removeEventListener(), передаючи той самий тип події ("click") та посилання на функцію обробника (myEventHandler).

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

Якщо обробник подій додається як анонімна функція, видалення його може бути складнішим завданням, оскільки немає прямого посилання на функцію. У такому випадку, для успішного видалення, функцію-обробник необхідно зберегти в змінну, яка використовується як посилання при видаленні.

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

Синтаксис

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

Параметри

*type

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

*listener

Функція обробника події, яку слід вилучити з цільового об'єкта подій.

options

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

useCapture

Булеве значення, яке вказує, чи обробник подій, який слід вилучити, зареєстрований як захоплюючий. Якщо цей параметр відсутній, припускається значення за замовчуванням false.

Return

none

Повертає undefined.

Переглядачі

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

Приклади

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

// Створення функції-обробника події
function handleClick() {
  alert('Кнопка була натиснута!');
}

// Отримання посилання на кнопку
const myButton = document.getElementById('myButton');

// Додавання обробника події
myButton.addEventListener('click', handleClick);

// Деякий код, який виконується

// У цьому місці може бути інший код, і потрібно видалити обробник, коли він більше не потрібен

// Видалення обробника події
myButton.removeEventListener('click', handleClick);

// Створення функції-обробника події
function handleMouseMove(event) {
  console.log(`Курсор рухається по координатах X: ${event.clientX}, Y: ${event.clientY}`);
}

// Отримання посилання на об'єкт, до якого додаємо обробник
const myElement = document.getElementById('myElement');

// Додавання обробника події для руху миші
myElement.addEventListener('mousemove', handleMouseMove);

// Деякий код, який виконується

// У цьому місці може бути інший код, який визначає, коли потрібно видалити обробник

// Видалення обробника події
myElement.removeEventListener('mousemove', handleMouseMove);