Gebeurtenisvoortplanting in JavaScript begrijpen

Gebeurtenissen in JavaScript werken als meldingen dat een gebruikersinteractie of andere actie heeft plaatsgevonden. Wanneer u bijvoorbeeld op een formulierknop klikt, genereert uw browser een gebeurtenis om aan te geven dat dit is gebeurd. Typen in een zoekvak roept ook gebeurtenissen op en dit is hoe auto-suggestie vaak online werkt.

In JavaScript worden gebeurtenissen waarbij gebruikersinteractie betrokken is, meestal gericht tegen specifieke elementen. Als u bijvoorbeeld op een knop klikt, wordt er een gebeurtenis tegen die knop geplaatst. Maar gebeurtenissen verspreiden zich ook: ze schieten op andere elementen in de documenthiërarchie.

Lees verder om alles te weten te komen over de verspreiding van evenementen en de twee verschillende beschikbare typen.

Wat is gebeurtenisafhandeling in JavaScript?

U kunt JavaScript-code gebruiken om gebeurtenissen die een webpagina oproept, op te vangen en erop te reageren. U kunt dit doen om standaardgedrag te negeren of actie te ondernemen als er geen standaard bestaat. Een bekend voorbeeld is formuliervalidatie. Met gebeurtenisafhandeling kunt u het normale proces van het indienen van formulieren onderbreken.

Beschouw dit voorbeeld:

Klik hier

De bovenstaande code heeft een knopelement met een id met de naam knop. Het heeft een klikgebeurtenislistener die een waarschuwing weergeeft met het bericht Hallo Wereld.

Wat is gebeurtenisvoortplanting?

Voortplanting van gebeurtenissen beschrijft de volgorde waarin de gebeurtenissen door de DOM-boom wanneer de webbrowser ze activeert.

Stel dat er een formuliertag in een div-tag zit, en beide hebben onclick-gebeurtenislisteners. Gebeurtenisvoortplanting beschrijft hoe de ene gebeurtenislistener na de andere kan vuren.

Er zijn twee soorten voortplanting:

1. Event borrelen, waardoor gebeurtenissen naar boven borrelen, van kind naar ouder.
2. Event capture, waarbij gebeurtenissen naar beneden reizen, van ouder naar kind.

Wat is Event Bubbling in JavaScript?

Gebeurtenisborrelen betekent dat de richting van de gebeurtenisvoortplanting zal zijn van het onderliggende element naar het bovenliggende element.

Beschouw het volgende voorbeeld. Het heeft drie geneste elementen: div, form en button. Elk element heeft een Klik gebeurtenis luisteraar. De browser toont een alarmeren met een bericht wanneer u op elk element klikt.

De volgorde waarin de webbrowser waarschuwingen weergeeft, is standaard knop, formulier en vervolgens div. De gebeurtenissen borrelen op van kind tot ouder.

 div


 formulier 



 Knop

Wat is het vastleggen van gebeurtenissen?

Bij het vastleggen van gebeurtenissen is de volgorde van voortplanting het tegenovergestelde van borrelen. Anders is het concept identiek. Het enige verschil met vastleggen is dat gebeurtenissen plaatsvinden van ouder op kind. In tegenstelling tot het vorige voorbeeld, zal de browser bij het vastleggen van gebeurtenissen waarschuwingen in deze volgorde weergeven: div, formulier en knop.

Om het vastleggen van gebeurtenissen te bereiken, hoeft u slechts één wijziging in de code aan te brengen. De tweede parameter van addEventListener() bepaalt het type voortplanting. Het is standaard onwaar, om borrelen weer te geven. Om het vastleggen van gebeurtenissen in te schakelen, moet u de tweede parameter instellen op true.

 div.addEventListener("klik", ()=>{
 waarschuwing("div")
 }, waar);
 form.addEventListener("klik", ()=>{
 waarschuwing("formulier")
 }, waar);
 button.addEventListener("klik", ()=>{
 alert("knop")
 }, waar);

Hoe kunt u verspreiding van evenementen voorkomen?

U kunt de verspreiding van gebeurtenissen stoppen met behulp van de stoppropagatie() methode. De addEventListener() methode accepteert een gebeurtenisnaam en een handlerfunctie. De handler neemt een gebeurtenisobject als parameter. Dit object bevat alle informatie over de gebeurtenis.

Wanneer u de. aanroept stoppropagatie() methode, zal de gebeurtenis vanaf dat punt stoppen met verspreiden. Wanneer u bijvoorbeeld stoppropagatie() op het formulierelement stoppen de gebeurtenissen met borrelen tot aan de div. Als u op de knop klikt, ziet u gebeurtenissen op de knop en het formulier, maar niet op de div.

form.addEventListener("klik", (e)=>{
e.stopPropagation();
 waarschuwing("formulier");
});

Verwant: Het ultieme JavaScript-spiekbriefje

JavaScript heeft veel kracht onder de motorkap

De gebeurtenisafhandeling van JavaScript is krachtig, vergelijkbaar met veel volwaardige interfacetalen. Wanneer u interactieve webapplicaties ontwikkelt, is dit een essentieel onderdeel van uw gereedschapskist. Maar er zijn nog veel meer geavanceerde onderwerpen om te begrijpen. Voor professionele JavaScript-ontwikkelaars valt er veel te leren!

Als je JavaScript als een pro wilt leren coderen, bekijk dan onze gids voor slimme oneliners en bereid je voor op wow in je volgende interview.

11 JavaScript-oneliners die u moet kennen

Bereik veel met slechts een beetje code met behulp van dit brede scala aan JavaScript-oneliners.

Lees volgende

Over de auteur