Události JavaScriptu byly vstupní branou k uživatelské interakci v rámci prohlížeče od jeho počátku. Události nám nejen říkají, kdy k interakci dojde, ale události nám říkají typ interakce, zapojené uzly a poskytují nám metody pro práci s událostí. Vytváření vlastních událostí a jejich spouštění bylo vždy složitější. Pomocí JavaScript CustomEvent API lze tento trik eliminovat. Rozhraní CustomEvent API umožňuje vývojářům nejen vytvářet vlastní události, ale také je spouštět na uzlech DOM a předávat přitom data. Nejlepší ze všeho je, že API je super jednoduché!
JavaScript
Při práci s přizpůsobením událostí jsou v události, která je „vlastní“, zahrnuty dvě součásti:název vlastní události a schopnost tuto událost spustit. Přidání posluchače události k prvku však zůstane stejné:
myElement.addEventListener("userLogin", function(e) { console.info("Event is: ", e); console.info("Custom data is: ", e.detail); })
Zde jsme přidali userLogin
událost, stejně snadno jako bychom mohli přidat nativní událost přejetí myší nebo zaměření – to není nic zvláštního. Speciální částí je vytvoření a spuštění události:
// First create the event var myEvent = new CustomEvent("userLogin", { detail: { username: "davidwalsh" } }); // Trigger it! myElement.dispatchEvent(myEvent);
CustomEvent
konstruktor umožňuje vytvoření vlastní události, což vám umožní předat jak název vlastní události, tak řadu speciálních vlastností; dispatchEvent
spouští událost na daném prvku. Udělejme událost, která má být spuštěna, super přizpůsobenou konfigurací jejích bublinových, zrušitelných a podrobných vlastností:
var myEvent = new CustomEvent("userLogin", { detail: { username: "davidwalsh" }, bubbles: true, cancelable: false });
Vytváření a spouštění vlastních událostí pomocí vlastních dat je neuvěřitelně užitečné. Nejen, že si můžete vytvořit vlastní konvenci pojmenování událostí, ale můžete také předávat vlastní data! S podporou prohlížeče můžete držet krok s rozhraním CustomEvent API na MDN, ale toto rozhraní API je dostupné ve většině moderních prohlížečů.