JavaScript EventTarget — addEventListener для будь-чого

EventTarget — базовий клас усього, що вміє приймати події: елементів, window, document, XMLHttpRequest, навіть власних класів.

правити

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

Саме звідси беруться addEventListener(), removeEventListener() і dispatchEvent() — вони не належать елементам, вони успадковані.

І це відкриває непомічену можливість: свій клас теж може бути джерелом подій. Досить успадкуватись від EventTarget — і з ним працюватимуть ті самі addEventListener і CustomEvent, що й з кнопкою. Не треба вигадувати власну систему підписок.

Власні дані передаються через поле detail у CustomEvent.

Важливий сучасний прийом — опція { signal }: обробник знімається сам, коли спрацює AbortController. Це найнадійніший спосіб прибрати за собою й не залишити витік.

правити

Порада

addEventListener(..., { once: true }) знімає обробник після першого спрацювання — не треба тримати посилання на функцію, щоб потім її зняти.

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

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

Синтаксис

target.addEventListener("click", handler);

методи

Переглядачі

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

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

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

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

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

Приклади

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

<button id="demo-button">Кнопка</button>

function onClick() {
    console.log('клік');
}

function onResize() {
    console.log('resize');
}

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

class Store extends EventTarget {
    constructor() {
        super();
        this.items = [];
    }

    add(item) {
        this.items.push(item);
        // своя подія — з даними в detail
        this.dispatchEvent(new CustomEvent('added', { detail: item }));
    }
}

const store = new Store();

store.addEventListener('added', event => {
    console.log('Додано:', event.detail);
});

store.add({ id: 1, name: 'CSS' });

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

button.addEventListener('click', onClick, { signal: controller.signal });
window.addEventListener('resize', onResize, { signal: controller.signal });

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