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

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

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

Метод removeEventListener() викликається на елементі, з якого потрібно видалити обробник подій. Він приймає три аргументи: назву події, функцію обробника, яку потрібно видалити, та необов’язковий об’єкт опцій, що вказує, як слідкувати за подією.

Простий випадок:

Для ілюстрації використання методу розглянемо сценарій, де ми маємо кнопку, до якої додано обробник події кліку. Пізніше, з певних причин, нам може знадобитися видалити цей обробник події.

// Додавання обробника події
const button = document.querySelector('button');
function handleClick() {
    console.log('Кнопка натиснута');
}
button.addEventListener('click', handleClick);

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

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

Складніший випадок з опціями:

Якщо при додаванні обробника події було використано додаткові опції, наприклад capture або once, то при видаленні обробника необхідно вказати ці ж опції, щоб вказати, який саме обробник потрібно видалити.

// Додавання обробника події з опцією
button.addEventListener('click', handleClick, {capture: true});

// Видалення обробника події з тією ж опцією
button.removeEventListener('click', handleClick, {capture: true});

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

правити

Порада

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

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

Порада

Щоб забезпечити гнучке управління подіями, розгляньте можливість використання зовнішніх бібліотек або фреймворків, які надають більш зручний API для роботи з подіями. Втім, навіть при використанні таких інструментів, розуміння принципів роботи removeEventListener() залишається ключовим для ефективного управління ресурсами та підтримки чистоти коду.

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

Порада

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

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

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

Синтаксис

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

Параметри

type

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

автор: Bond

правити

listener

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

автор: Bond

правити

options

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

автор: Bond

правити

useCapture

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

автор: Bond

правити

Повернення

undefined

Повертає undefined. Метод removeEventListener() не повертає жодного значення, він використовується виключно для видалення обробника події з об'єкта.

автор: Bond

правити

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

// Функція, яка викликається при кліку на елемент
function handleClick() {
    console.log("Елемент був натиснутий");
}

// Додаємо обробник події
document.getElementById("myElement").addEventListener("click", handleClick);

// Видаляємо обробник події
document.getElementById("myElement").removeEventListener("click", handleClick);

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

function handleFirstClick() {
    console.log("Це повідомлення з'явиться лише один раз");

    // Видаляємо обробник події після його першого виклику
    document.getElementById("uniqueElement").removeEventListener("click", handleFirstClick);
}

// Додаємо обробник події, який буде видалений після першого виклику
document.getElementById("uniqueElement").addEventListener("click", handleFirstClick);