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.

правити

Порада

Видаляйте обробники подій при необхідності, особливо при зміні сторінки або виході зі скрипта, щоб підтримувати ефективне управління ресурсами та уникати непередбачених поведінок.

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

Порада

Перевіряйте наявність обробників подій перед їх видаленням, щоб уникнути помилок. Використовуйте ті самі параметри, які були вказані при додаванні обробників, для точного визначення, який обробник слід вилучити.

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

Порада

Уникайте видалення анонімних функцій безпосередньо, оскільки це може призвести до проблем зі співставленням функцій при спробі вилучення їх з події. Замість цього, використовуйте іменовані функції.

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

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

Синтаксис

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

Параметри

type

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

автор: Bond

правити

listener

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

автор: Bond

правити

options

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

автор: Bond

правити

useCapture

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

автор: Bond

правити

Повернення

none

Повертає undefined.

автор: Bond

правити

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<button id="myButton">Натисни</button>

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

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

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

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

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

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

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

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

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

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

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

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

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