Az események terjedésének megértése JavaScriptben

A JavaScript eseményei úgy működnek, mint egy felhasználói interakcióról vagy egyéb műveletről szóló értesítés. Például, amikor egy űrlapgombra kattint, a böngészője eseményt generál, amely jelzi, hogy ez megtörtént. A keresőmezőbe való beírás is eseményeket vet fel, és az automatikus javaslat gyakran így működik online.

A JavaScriptben a felhasználói interakciót igénylő események általában bizonyos elemek ellen tüzelnek. Például, ha egy gombra kattint, eseményt indít az adott gomb ellen. De az események is terjednek: a dokumentumhierarchia más elemei ellen tüzelnek.

Olvasson tovább, hogy mindent megtudjon az események terjesztéséről és a rendelkezésre álló két különböző típusról.

Mi az eseménykezelés a JavaScriptben?

JavaScript-kóddal elkaphatja a weboldal által felvetett eseményeket, és reagálhat azokra. Ezzel felülírhatja az alapértelmezett viselkedést, vagy ha nem létezik alapértelmezett, akkor intézkedhet. Gyakori példa az űrlap érvényesítése. Az eseménykezelés lehetővé teszi az űrlapok beküldésének normál folyamatának megszakítását.

Tekintsük ezt a példát:

Kattints ide

A fenti kódban van egy gombelem, amelynek azonosítója gomb nevű. Rendelkezik egy kattintásos eseményfigyelővel, amely figyelmeztetést jelenít meg az üzenettel együtt Helló Világ.

Mi az az eseményterjesztés?

Az események terjedése azt a sorrendet írja le, amelyben az események áthaladnak a DOM fa amikor a böngésző elindítja őket.

Tegyük fel, hogy van egy form címke a div címkén belül, és mindkettő rendelkezik onclick eseményfigyelővel. Az Eseményterjedés leírja, hogy az egyik eseményfigyelő hogyan aktiválódhat a másik után.

Kétféle szaporítás létezik:

1. Eseménybuborékolás, amellyel az események felfelé buborékolnak, gyermekről szülőre.
2. Eseményrögzítés, amellyel az események lefelé haladnak, a szülőtől a gyermekig.

Mi az esemény buborékolás a JavaScriptben?

Az eseménybuborékolás azt jelenti, hogy az esemény terjedésének iránya a gyermekelemtől a szülőelemig terjed.

Tekintsük a következő példát. Három beágyazott eleme van: div, form és button. Minden elemnek van egy kattintson eseményhallgató. A böngésző megjelenít egy éber üzenettel, amikor az egyes elemekre kattint.

Alapértelmezés szerint a webböngésző a következőképpen jeleníti meg a figyelmeztetéseket: gomb, űrlap, majd div. Az események gyermekről szülőre bugyborékolnak.

 div


 forma 



 Gomb

Mi az eseményrögzítés?

Az eseményrögzítésnél a terjedési sorrend ellentétes a buborékolással. Egyébként a koncepció azonos. Az egyetlen különbség a rögzítés között, hogy az események szülőről gyermekre történnek. Az előző példával ellentétben az eseményrögzítésnél a böngésző a figyelmeztetéseket a következő sorrendben jeleníti meg: div, form és button.

Az eseményrögzítés eléréséhez mindössze egyetlen módosítást kell végrehajtania a kódon. A második paraméter addEventListener() meghatározza a terjedés típusát. Alapértelmezés szerint hamis, a bugyborékolást jelenti. Az eseményrögzítés engedélyezéséhez a második paramétert igazra kell állítani.

 div.addEventListener("click", ()=>{
 figyelmeztetés ("div")
 }, igaz);
 form.addEventListener("click", ()=>{
 figyelmeztetés ("űrlap")
 }, igaz);
 button.addEventListener("click", ()=>{
 figyelmeztetés ("gomb")
 }, igaz);

Hogyan akadályozhatod meg az események terjedését?

Az események terjedését leállíthatja a stopPropagation() módszer. A addEventListener() A metódus elfogad egy eseménynevet és egy kezelő függvényt. A kezelő egy eseményobjektumot vesz paraméterként. Ez az objektum az eseményre vonatkozó összes információt tartalmazza.

Amikor meghívod a stopPropagation() módszerrel, az esemény ettől a ponttól leáll. Például amikor használod stopPropagation() a form elemen az események leállnak bugyborékolni a div-ig. Ha rákattint a gombra, akkor a gombon és az űrlapon megjelennek az események, de a div nem.

form.addEventListener("click", (e)=>{
e.stopPropagation();
 alert("űrlap");
});

Összefüggő: Az Ultimate JavaScript csalólap

A JavaScriptnek nagy ereje van a motorháztető alatt

A JavaScript eseménykezelése hatékony, sok teljes felületű nyelvhez hasonlítható. Amikor interaktív webalkalmazásokat fejleszt, ez az eszköztár létfontosságú része. De sok más haladó téma is megragadható. A professzionális JavaScript-fejlesztőknek sok tanulnivaló van!

Ha profi módon szeretné megtanulni a JavaScript kódolását, tekintse meg az okos bélésekről szóló útmutatónkat, és készüljön fel a wow-ra a következő interjúban.

11 JavaScript egysoros, amit tudnia kell

Sokat érhet el egy kis kóddal a JavaScript egysorosok széles skálájával.

Olvassa el a következőt

A szerzőről