Event Bubbling en Event Capturing zijn de meest gebruikte termen in JavaScript op het moment van event flow. Dit zijn de twee manieren waarop gebeurtenissen worden doorgegeven in de HTML DOM API. Dit artikel over Event Bubbling en Event Capturing in JavaScript zal in detail beschrijven waarom we deze nodig hebben in in de volgende volgorde:
Wat is Event Bubbling in JavaScript?
Event Bubbling is de term die mensen moeten tegenkomen bij het ontwikkelen van een webapplicatie of webpagina . In feite is de Event Bubbling een techniek waarbij event-handlers worden aangeroepen wanneer een item op een ander item is genest en van dezelfde event moet zijn. Het is vergelijkbaar met inkapseling.
Event Bubbling is slechts een klein deel van de afhandeling van gebeurtenissen in JavaScript. Om het beter te begrijpen, moeten we weten over Event Propagation en hoe het Event Bubbling ondersteunt.
Wat is de voortplanting van gebeurtenissen?
Gebeurtenispropagatie kan worden vergeleken als de bovenliggende term met het borrelen en vastleggen van gebeurtenissen als het onderliggende.Het wordt als volgt weergegeven:
Als u op een afbeelding klikt, genereert het niet alleen een klikgebeurtenis, maar gaat het verder naar ouder 'a' en grootvader 'li'. Op deze manier vindt de voortplanting van de functie plaats. Hier wordt de afbeelding beschouwd als het kind en is het het doel van de gebeurtenis waar de klik wordt gegenereerd. Het beeld vormt samen met zijn voorouders samen de tak in een boomterminologie. De tak is belangrijk omdat we het pad leren kennen waarlangs de gebeurtenis zich voortplant.
Elk van de luisteraars wordt aangeroepen met respectievelijk een gebeurtenisobject dat informatie over de gebeurtenis verzamelt. Deze voortplanting is erg belangrijk omdat we het proces van het oproepen van alle luisteraars voor de gegeven gebeurtenis leren kennen. Uit de bovenstaande afbeelding kunnen we zien dat de branchebepaling statisch is. Eventuele wijzigingen in de boomstructuur tijdens het evenement worden genegeerd. Hier is de voortplanting bidirectioneel, dat wil zeggen dat het van het venster naar het gebeurtenisdoel gaat en terugkeert. Hier wordt de voortplanting grofweg onderverdeeld in drie hoofdtypen. Die zijn:
- De vangstfase: Van het raam naar de doelfase van het evenement gaan.
- De doelfase: Het is de doelfase.
- De bellenfase: Van de doelouder van de gebeurtenis terug naar het venster.
Wat is het vastleggen van gebeurtenissen?
In deze fase worden de capturer-listeners aangeroepen waarvan de waarde is geregistreerd als 'true'. Het is geschreven als:
wat is een instantievariabele
el.addEventListener ('klik', luisteraar, waar)Hier is de waarde van de listener geregistreerd als 'waar', dus deze gebeurtenis wordt vastgelegd. Als er geen waarde was, was de waarde standaard false en zou de gebeurtenis niet worden vastgelegd. Dus in deze fase vindt die gebeurtenis waarvan de waarde waar is alleen zijn weg vanuit het raam en wordt opgeroepen en vastgelegd.
Vervolgens worden in de gebeurtenisdoelfase alle geregistreerde luisteraars aangeroepen, ongeacht hun vlagstatus die waar of onwaar is.
Gebruik van Event Bubbling en Event Capturing in JavaScript
In de Bubbling-fase wordt alleen de niet-capturer aangeroepen, dat zijn de events die de vlagwaarde “false” hebben. Gebeurtenis-bubbling en Event Capturing zijn erg handig en belangrijk in de DOM-terminologie (Document Object Model).
el.addEventListener ('click', listener, false) // listener legt niet vast el.addEventListener ('click', listener) // listener legt niet vastBovenstaand stuk code toont de werking van de borrel- en vastlegfase. Niet alle evenementen gaan naar het evenementdoel. Sommigen van hen worden niet opgeblazen. Hun reis stopt na de doelfase. De fasestroom met drie gebeurtenissen wordt geïllustreerd in het volgende diagram:
Gebeurtenis-bubbling werkt niet bij alle soorten gebeurtenissen, maar de luisteraar moet beschikken over '.bubbel ”Booleaanse eigenschap van het gebeurtenisobject. Enkele van de andere eigenschappen zijn:
lees en schrijf Excel-bestand in java
- e.doel: dat verwijst naar het gebeurtenisdoel.
- e.currentTarget: het is de modus waarop de huidige luisteraars zijn geregistreerd. Hier wordt naar de waarde verwezen door te gebruiken deze trefwoord.
- e.eventPhase: Het is een geheel getal dat verwijst naar drie andere sleutelwoorden, zoals Capturing_phase, Bubbling_phase, AT_Target fase.
Werkprocedure
Laten we de bovenstaande illustratie eens nader bekijken. Laten we op het 'buttonOne' -element klikken en dan wordt er onmiddellijk een gebeurtenis geactiveerd. Normaal gesproken begint een evenement zijn reis vanaf de wortel die het bovenste element van de boom is. Vervolgens gaat het de boom volgen naar de doelgebeurtenis die 'buttonOne' is. Hier is hoe het reist:
Zoals te zien is in de figuur, baant de gebeurtenis zich een weg door de DOM-terminologieën en bereikt uiteindelijk de doelgebeurtenis. Zodra het evenement zijn doel bereikt, houdt het niet op. Het gaat maar door binnen DOM-terminologieën, zoals geïllustreerd in de onderstaande afbeelding.
Net als voorheen krijgt elk element langs het pad van het evenement een melding over het bestaan ervan. Terwijl het zo verloopt, moet u zich afvragen of we het proces kunnen stoppen of niet. Welnu, het antwoord op de vraag is: Ja, we kunnen de verspreiding van de gebeurtenis stoppen. Dit wordt gedaan door de 'StopPropagation' methode van het gebeurtenisobject.
window.addEventListener ('click', e => {e.stopPropagation ()}, true) window.addEventListener ('click', listener ('c1'), true) window.addEventListener ('click', listener ('c2 '), true) window.addEventListener (' klik ', listener (' b1 ')) window.addEventListener (' klik ', listener (' b2 '))Door het trefwoord toe te passen, kunnen we de voortplanting stoppen. Het werkt als volgt wanneer we het zoekwoord ' stopPropagation ' dan worden alle gebeurtenissen onder de hoofdgebeurtenissen niet opgeroepen en daarom zouden ze ook niet worden aangeroepen zoals vermeld in het stuk code hierboven. Er is een ander zoekwoord dat bekend staat als ' stopImmediatePropagation ”. Zoals de naam al doet vermoeden, stopt het onmiddellijk de procedure van de broers en zussen.
Hiermee zijn we aan het einde van ons artikel gekomen. Ik hoop dat je hebt begrepen wat Event Bubbling en Event Capturing in JavaScript is.
Nu je meer weet over Event Bubbling en Event Capturing in JavaScript, bekijk dan het door Edureka. Web Development Certification Training helpt u te leren hoe u indrukwekkende websites kunt maken met HTML5, CSS3, Twitter Bootstrap 3, jQuery en Google API's en deze kunt implementeren op Amazon Simple Storage Service (S3).
Heeft u een vraag voor ons? Vermeld het in het commentaargedeelte van 'Evenement bubbelen en vastleggen van gebeurtenissen in JavaScript' en we nemen zo snel mogelijk contact met u op.