JS метод Document.removeEventListener()

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

Метод 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(type, listener)
removeEventListener(type, listener, options)
removeEventListener(type, listener, useCapture)

Параметри

*type

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

*listener

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

options

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

useCapture

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

Return

undefined

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

Переглядачі

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

Приклади

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

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

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

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

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

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

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