Vlastní eventy v Javascriptu

CustomEvent API

Pro vytváření vlastních eventů je k dispozici trefně pojmenovaná třída CustomEvent. Její konstruktor má jediný povinný argument a tím je název eventu.

// vytvoření vlastního eventu
const mujEvent = new CustomEvent('pecNamSpadla')

Jakmile je event vytvořený, můžeme ho spustit. Eventy v Javascriptu nemůžou být, narozdíl od jiných programovacích jazyků, spuštěny na objektech se kterými pracujete (alespoň ne v základu, ale o tom více níže). Jsou spouštěny na DOM elementech, tedy v podstatě na HTML elementech ve stránce, pomocí metody dispatchEvent.

// spuštění vlastního eventu
const mujElement = document.querySelector('#muj-element')
mujElement.dispatchEvent(mujEvent)

Pokud chcete mít eventy přístupné globálně, nejjednodušší řešení je spustit je přímo na elementu document. Ale dávejte si pozor na to, aby vaše eventy měly unikátní názvy.

Naslouchání na vlastní eventy je stejné, jako na jakékoliv jiné. Pomocí metody addEventListener, které je předán název eventu je možné na zvoleném elementu naslouchat .

// vlastním eventům lze naslouchat stejně jako těm klasickým
mujElement.addEventListener('pecNamSpadla', event => {
  console.log('Event se spustil!')
})

Tady si dejte pozor, ať nespustíte event dříve, než je pro něj definovaný nějaký listener. V takovém případě by listener už nic nezaznamenal.

Vlastní data

CustomEvent umožňuje navíc jednu velmi užitečnou věc - přidat vlastní data. Konstruktor přijímá jako druhý (volitelný) argument objekt s parametrem "detail". Ten může obsahovat libovolná data. V callback funkci listeneru jsou pak tyto data dostupná.

// vytvořený event s vlastními daty
const PRIDANO_ZBOZI = 'pridanoZbozi'
const eventPridanoZbozi = new CustomEvent(PRIDANO_ZBOZI, {
  detail: {
    produkt: 'rohlik',
    mnozstvi: 1,
    podobneProdukty: ['veka', 'chleba', 'bageta']
  }
})

// data jsou dostupná v listeneru
mujElement.addEventListener(PRIDANO_ZBOZI, event => {
  console.log(event.detail.produkt) // 'rohlik'
  console.log(event.detail.mnozstvi) // 1
  console.log(event.detail.podobneProdukty) // ['veka', ...]
})

// spuštění eventu
mujElement.dispatchEvent(eventPridanoZbozi)

Kromě parametru detail jsou v listeneru dostupné i parametry target, currentTarget, type, a další, které jsou dostupné u základních JS eventů. Je to kvůli tomu, že CustomEvent dědí ze třídy Event, která je pro ně základem.

Podobný příklad si můžete vyzkoušet zde.

Podpora a knihovny

Pokud se rozhlédnete po internetu, existuje spousta knihoven pracující s eventy. Například všem známá jQuery, která je umožňuje vytvářet velmi podobným způsobem, ale s pravděpodobně širší podporou prohlížečů. EventEmitter3 zase který umožňuje vázat eventy na objekty. Také stojí za zmínku velmi populární knihovna event-stream, převádějící eventy na streamy. Ta byla nedávno terčem pro dost nepříjemnou bezpečnostní trhlinu. Mimochodem útok byl proveden zajímavým způsobem. Jestli vás to zajímá, doporučuji analýzu od Zacha Schneidera.

Podpora CustomEvent je v moderních prohlížečích velmi dobrá. Na startovní čáře zůstává opět IE. V případě, že potřebujete i jeho podporu, dobří lidé z MDN pro vás připravili polyfill.

---

Pracujete s eventy a používáte knihovnu, kterou můžete doporučit? Dejte nám vědět v komentářích.