Ereignisblasen und Ereigniserfassung In JavaScript: Alles, was Sie wissen müssen

Event Bubbling und Event Capturing sind zum Zeitpunkt des Ereignisflusses die am häufigsten verwendeten Begriffe in JavaScript. Dies sind die beiden Möglichkeiten der Ereignisweitergabe in der HTML-DOM-API. In diesem Artikel über Ereignisblasenbildung und Ereigniserfassung in JavaScript wird ausführlich beschrieben, warum wir diese in JavaScript benötigen in der folgenden Reihenfolge:

• • • Was ist Ereignisblasen in JavaScript?
    • Was ist Ereignisausbreitung?
    • Was ist Ereigniserfassung?
    • Verwendung von Ereignisblasen und Ereigniserfassung in JavaScript
    • Arbeitsablauf

Was ist Ereignisblasen in JavaScript?

Event Bubbling ist der Begriff, auf den Menschen bei der Entwicklung einer Webanwendung oder Webseite stoßen müssen . Grundsätzlich ist das Ereignis-Bubbling eine Technik, bei der Ereignishandler aufgerufen werden, wenn ein Element auf einem anderen Element verschachtelt ist und vom selben Ereignis sein muss. Es ähnelt der Kapselung.

Event Bubbling ist nur ein kleiner Teil der Ereignisbehandlung in JavaScript. Um es besser zu verstehen, müssen wir über die Ereignisausbreitung und die Unterstützung von Ereignisblasen Bescheid wissen.

Was ist Ereignisausbreitung?

Die Ereignisausbreitung kann als übergeordneter Begriff mit dem Sprudeln und Erfassen von Ereignissen als untergeordnetem Begriff verglichen werden.Es wird wie folgt dargestellt:

Wenn Sie auf ein Bild klicken, wird nicht nur ein Klickereignis generiert, sondern auch das übergeordnete Element 'a' und der Großvater 'li'. Auf diese Weise findet die Funktionsausbreitung statt. Hier wird das Bild als untergeordnetes Bild betrachtet und ist das Ereignisziel, auf dem der Klick generiert wird. Das Bild bildet zusammen mit seinen Vorfahren zusammen den Zweig in einer Baumterminologie. Der Zweig ist wichtig, wenn wir den Pfad kennen, auf dem sich das Ereignis ausbreitet.

wie man ein Array von Objekten erstellt

Jeder der Listener wird jeweils mit einem Ereignisobjekt aufgerufen, das Informationen über das Ereignis sammelt. Diese Weitergabe ist sehr wichtig, da wir wissen, wie alle Listener für das jeweilige Ereignis angerufen werden. Aus dem obigen Bild können wir erkennen, dass die Verzweigungsbestimmung statisch ist. Während des Ereignisses auftretende Baumänderungen werden ignoriert. Hier ist die Weitergabe bidirektional, dh sie geht vom Fenster zum Ereignisziel und kehrt zurück. Hier wird die Ausbreitung grob in drei Haupttypen eingeteilt. Jene sind:

1. Die Erfassungsphase: Vom Fenster zur Ereigniszielphase gehen.
2. Die Zielphase: Es ist die Zielphase.
3. Die Blasenphase: Vom übergeordneten Ereignisziel zurück zum Fenster.

Was ist Ereigniserfassung?

In dieser Phase werden die Capturer-Listener aufgerufen, deren Wert als 'true' registriert wurde.. Es ist geschrieben als:

el.addEventListener ('click', Listener, true)

Hier wurde der Listener-Wert als 'true' registriert, sodass dieses Ereignis erfasst wird. Wenn es keinen Wert gäbe, wäre der Wert standardmäßig falsch und das Ereignis würde nicht erfasst. In dieser Phase findet das Ereignis, dessen Wert wahr ist, nur seinen Weg aus dem Fenster und wird aufgerufen und erfasst.

In der Ereigniszielphase werden dann alle registrierten Listener aufgerufen, unabhängig von ihrem Flag-Status, der wahr oder falsch ist.

Verwendung von Ereignisblasen und Ereigniserfassung in JavaScript

In der Bubbling-Phase wird nur der Nicht-Capturer aufgerufen, dh die Ereignisse, deren Flag-Wert als 'false' angegeben ist. Ereignisblasenbildung und Ereigniserfassung sind in der DOM-Terminologie (Document Object Model) sehr nützlich und wichtig.

el.addEventListener ('click', Listener, false) // Listener erfasst nicht el.addEventListener ('click', Listener) // Listener erfasst nicht

Der obige Code zeigt die Funktionsweise der Blasen- und Erfassungsphase. Nicht alle Ereignisse werden an das Ereignisziel gesendet. Einige von ihnen sprudeln nicht. Ihre Reise stoppt nach der Zielphase. Der Phasenfluss mit drei Ereignissen ist in der folgenden Abbildung dargestellt:

So schließen Sie eine Java-Anwendung

Das Sprudeln von Ereignissen funktioniert nicht bei allen Arten von Ereignissen, die der Hörer jedoch besitzen muss '.Blase Boolesche Eigenschaft des Ereignisobjekts. Einige der anderen Eigenschaften umfassen:

1. e.target: das verweist auf das Ereignisziel.
2. e.currentTarget: Dies ist der Modus, in dem die aktuellen Listener registriert sind. Hier wird mit auf den Wert verwiesen Dies Stichwort.
3. e.eventPhase: Es ist eine Ganzzahl, die auf andere drei Schlüsselwörter verweist, wie z Erfassungsphase, Blasenphase, AT_Target Phase.

Arbeitsablauf

Schauen wir uns die obige Abbildung genauer an. Klicken wir auf das Element 'buttonOne' und sofort wird ein Ereignis ausgelöst. Normalerweise beginnt ein Ereignis seine Reise von der Wurzel, die das oberste Element des Baums ist. Dann folgt dem Baum das Zielereignis 'buttonOne'. So reist es:

ist-eine und hat-eine Beziehung in Java

Wie in der Abbildung gezeigt, durchläuft das Ereignis die DOM-Terminologien und erreicht am Ende das Zielereignis. Sobald das Ereignis sein Ziel erreicht hat, endet es nicht mehr. Es geht innerhalb der DOM-Terminologien weiter und weiter, wie in der folgenden Abbildung dargestellt.

Wie zuvor wird jedes Element auf dem Weg des Ereignisses im weiteren Verlauf über seine Existenz informiert. Während es so weitergeht, müssen Sie sich überlegen, ob wir den Prozess stoppen können oder nicht. Nun, die Antwort auf die Frage lautet: Ja, wir können die Ausbreitung des Ereignisses stoppen. Dies erfolgt durch Aufrufen von 'StopPropagation' Methode des Ereignisobjekts.

window.addEventListener ('click', e => {e.stopPropagation ()}, true) window.addEventListener ('click', Listener ('c1'), true) window.addEventListener ('click', Listener ('c2') '), true) window.addEventListener (' click ', Listener (' b1 ')) window.addEventListener (' click ', Listener (' b2 '))

Durch Anwenden des Schlüsselworts können wir die Weitergabe stoppen. Das funktioniert so, wenn wir das Schlüsselwort „ stopPropagation ” dann werden nicht alle Ereignisse unter den Hauptereignissen aufgerufen und daher würden sie nicht aufgerufen, wie es im obigen Code erwähnt wird. Es gibt ein anderes Schlüsselwort, das als „ stopImmediatePropagation ”. Wie der Name schon sagt, wird das Verfahren der Geschwister sofort eingestellt.

Damit sind wir am Ende unseres Artikels angelangt. Ich hoffe, Sie haben verstanden, was Event Bubbling und Event Capturing in JavaScript ist.

Nachdem Sie sich mit Event Bubbling und Event Capturing in JavaScript vertraut gemacht haben, lesen Sie die von Edureka. Mithilfe der Schulung zur Webentwicklungszertifizierung erfahren Sie, wie Sie mit HTML5-, CSS3-, Twitter Bootstrap 3-, jQuery- und Google-APIs beeindruckende Websites erstellen und für Amazon Simple Storage Service (S3) bereitstellen.

Hast du eine Frage an uns? Bitte erwähnen Sie dies im Kommentarbereich von „Ereignisblasen und Ereigniserfassung in JavaScript“. Wir werden uns dann bei Ihnen melden.