JavaScript dispatchEvent() — згенерувати подію з коду

Метод dispatchEvent() запускає подію з коду — так, ніби її спричинив користувач.

правити

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

Головна цінність — власні події. Компонент може повідомити світ «я завантажив дані» чи «користувач обрав товар», не знаючи нічого про тих, хто його слухає. Це найдешевший спосіб розв'язати зв'язки між частинами застосунку.

Створюється подія через CustomEvent, а дані передаються в полі detail.

Дві опції, про які варто знати: bubbles: true дозволяє події спливати вгору по дереву (без неї подію почує лише сам елемент), а composed: true пускає її ще й за межі тіньового DOM — без цього подія з веб-компонента назовні не вийде.

правити

Нотатка

Штучна подія click не робить того, що робить справжній клік користувача: вона не відкриє нове вікно й не запустить те, що вимагає «жесту користувача». Браузер відрізняє справжній клік від згенерованого.

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

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

Переглядачі

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

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

Переглядач
	4	2	3.1	9	12	9

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

Переглядач
	4	18	4	3

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

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

Приклади

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

<button id="emitter">Компонент</button>

const element = document.getElementById('emitter');

// хтось інший слухає — на будь-якому рівні вище
document.addEventListener('item:selected', event => {
    console.log('Обрано:', event.detail.name);
});

// компонент повідомляє світ
element.dispatchEvent(new CustomEvent('item:selected', {
    detail: { id: 42, name: 'CSS' },
    bubbles: true,   // подія спливе вгору по дереву
    composed: true,  // вийде і за межі тіньового DOM
}));

// штучний клік — але «жесту користувача» він не дає
element.dispatchEvent(new Event('click'));