Pochopení šíření událostí v JavaScriptu

Události v JavaScriptu fungují jako upozornění, že došlo k interakci uživatele nebo jiné akci. Když například kliknete na tlačítko formuláře, váš prohlížeč vygeneruje událost, která označí, že se tak stalo. Zadáním do vyhledávacího pole se také spouští události a takto často funguje automatické navrhování online.

V JavaScriptu se události, které zahrnují interakci uživatele, obvykle spouštějí proti konkrétním prvkům. Například kliknutím na tlačítko vyvoláte událost proti tomuto tlačítku. Ale události se také šíří: střílejí proti jiným prvkům v hierarchii dokumentů.

Čtěte dále a dozvíte se vše o šíření událostí a dvou různých dostupných typech.

Co je zpracování událostí v JavaScriptu?

Pomocí kódu JavaScript můžete zachytit události, které webová stránka vyvolá, a reagovat na ně. Můžete to udělat, abyste přepsali výchozí chování nebo provedli akci, když žádné výchozí nastavení neexistuje. Běžným příkladem je ověřování formuláře. Zpracování událostí vám umožňuje přerušit běžný proces odesílání formuláře.

Zvažte tento příklad:

Klikni na mě

Výše uvedený kód má prvek tlačítka s ID s názvem button. Má posluchač události kliknutí, který zobrazuje upozornění se zprávou Ahoj světe.

Co je to propagace událostí?

Šíření událostí popisuje pořadí, ve kterém události procházejí strom DOM když je webový prohlížeč spustí.

Předpokládejme, že uvnitř značky div je značka formuláře a obě mají posluchače události onclick. Propagace událostí popisuje, jak se může jeden posluchač události spouštět za druhým.

Existují dva typy propagace:

1. Probublávání událostí, kterými události probublávají vzhůru, od dítěte k rodiči.
2. Zachycování událostí, pomocí kterých události postupují směrem dolů, od rodiče k dítěti.

Co je probublávání událostí v JavaScriptu?

Bublání událostí znamená, že směr šíření události bude od podřízeného prvku k jeho nadřazenému prvku.

Zvažte následující příklad. Má tři vnořené prvky: div, formulář a tlačítko. Každý prvek má a klikněte posluchač události. Prohlížeč zobrazí upozornění se zprávou, když kliknete na každý prvek.

Ve výchozím nastavení bude webový prohlížeč zobrazovat upozornění tlačítko, formulář a potom div. Události probublávají z dítěte na rodiče.

 div


 formulář 



 Knoflík

Co je zachycování událostí?

Při zachycování událostí je pořadí šíření opakem bublání. Jinak je koncept stejný. Jediný rozdíl oproti zachycování je v tom, že k událostem dochází od rodiče k potomkovi. Na rozdíl od předchozího příkladu se zachytáváním událostí prohlížeč zobrazí upozornění v tomto pořadí: div, formulář a tlačítko.

Chcete-li dosáhnout zachycení události, musíte provést pouze jednu změnu v kódu. Druhý parametr addEventListener() definuje typ šíření. Ve výchozím nastavení je nepravda, aby představovala bublání. Chcete-li povolit zachycování událostí, musíte nastavit druhý parametr na hodnotu true.

 div.addEventListener("click", ()=>{
 alert("div")
 }, skutečný);
 form.addEventListener("click", ()=>{
 upozornění ("formulář")
 }, skutečný);
 button.addEventListener("click", ()=>{
 upozornění ("tlačítko")
 }, skutečný);

Jak můžete zabránit šíření událostí?

Šíření událostí můžete zastavit pomocí stopPropagation() metoda. The addEventListener() metoda přijímá název události a funkci handleru. Obslužná rutina bere jako parametr objekt události. Tento objekt obsahuje všechny informace o události.

Když vyvoláte stopPropagation() , událost se od tohoto bodu přestane šířit. Například když používáte stopPropagation() na prvku formuláře přestanou události probublávat až do prvku div. Pokud kliknete na tlačítko, uvidíte události vyvolané na tlačítku a formuláři, ale ne na div.

form.addEventListener("click", (e)=>{
e.stopPropagation();
 alert("formulář");
});

Příbuzný: The Ultimate JavaScript Cheat Sheet

JavaScript má pod kapotou velkou sílu

Zpracování událostí JavaScriptu je výkonné, srovnatelné s mnoha plnohodnotnými jazyky rozhraní. Když vyvíjíte interaktivní webové aplikace, je to životně důležitá součást vaší sady nástrojů. Ale je tu mnoho dalších pokročilých témat, kterým je třeba se věnovat. Pro profesionální vývojáře JavaScriptu se toho musí hodně naučit!

Pokud se chcete naučit kódovat JavaScript jako profík, prohlédněte si našeho průvodce chytrými vložkami a připravte se na to, že při příštím rozhovoru budete ohromeni.

11 JavaScript One-Liners, které byste měli vědět

Dosáhněte toho hodně s malým množstvím kódu pomocí této široké řady jednořádkových JavaScriptů.

Přečtěte si další

O autorovi