JavaScript CustomEvent

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čů.