JavaScript addEventListener() — обробник події

Метод addEventListener() навішує обробник події на елемент, вікно чи будь-який інший об'єкт-ціль.

правити

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

На відміну від старого onclick, він дозволяє повісити кілька обробників на ту саму подію — і жоден не затре інший.

Третій аргумент — опції, і вони важливіші, ніж здається:

• once: true — обробник спрацює один раз і зніметься сам;
• passive: true — обіцянка не викликати preventDefault(); для scroll і touchstart це помітно прискорює прокрутку на мобільних;
• signal — обробник знімається, коли спрацює AbortController.

Окремо варто знати делегування: замість того щоб вішати обробник на тисячу рядків списку, вішають один на контейнер і дивляться в event.target. Це і швидше, і працює для елементів, доданих пізніше.

правити

Порада

Опція { signal } — найнадійніший спосіб прибрати за собою: один abort() знімає всі обробники одразу, і не треба тримати посилання на кожну функцію.

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

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

Переглядачі

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

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

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

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

Переглядач
addEventListener	yes	yes	yes	yes

Приклади

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

<ul id="list">
    <li data-id="1">Перший</li>
    <li data-id="2">Другий</li>
</ul>
<button id="demo-button">Одноразова кнопка</button>

function init() {
    console.log('перший і єдиний клік');
}

function onScroll() {}
function onResize() {}
function onKey() {}

const button = document.getElementById('demo-button');

// ОДИН обробник замість тисячі — працює і для нових елементів
document.getElementById('list').addEventListener('click', event => {
    const item = event.target.closest('li');

    if (item) {
        console.log('Клік по', item.dataset.id);
    }
});

// спрацює один раз і зніметься сам
button.addEventListener('click', init, { once: true });

// не заважаємо прокрутці на мобільних
window.addEventListener('scroll', onScroll, { passive: true });

// зняти всі обробники одним рухом
const controller = new AbortController();

window.addEventListener('resize', onResize, { signal: controller.signal });
window.addEventListener('keydown', onKey, { signal: controller.signal });

controller.abort(); // знято обидва