Beherrschen von Event-Bubbling und -Capturing in JavaScript

Ereignis-Bubbling und -Erfassung in JavaScript

Die Ereignisweitergabe in JavaScript beschreibt die Art und Weise, wie Ereignisse nach ihrer Auslösung durch das DOM fließen. Es gibt zwei Hauptphasen: Event Bubbling und Event Capturing. Das Verständnis dieser Konzepte ist für die effektive Verwaltung von Ereignis-Listenern von entscheidender Bedeutung.

1. Phasen der Ereignisausbreitung

Wenn ein Ereignis ausgelöst wird, breitet es sich in der folgenden Reihenfolge durch das DOM aus:

1. Erfassungsphase: Das Ereignis wandert von der Wurzel des DOM-Baums bis zum Zielelement.
2. Zielphase: Das Ereignis erreicht das Zielelement.
3. Blasenphase: Das Ereignis wandert vom Zielelement zurück zur Wurzel.

2. Ereignis sprudelt

In der Bubbling-Phase beginnt das Ereignis am Zielelement und sprudelt durch seine Vorfahren weiter.

Beispiel:

<div>





<pre class="brush:php;toolbar:false">document.getElementById("parent").addEventListener("click", function() {
  console.log("Parent clicked");
});

document.getElementById("child").addEventListener("click", function() {
  console.log("Child clicked");
});

Ausgabe beim Klicken auf die Schaltfläche:

Child clicked
Parent clicked

• Das Ereignis sprudelt von der Schaltfläche bis zur Div.

Blubbern stoppen

Verwenden Sie die Methode stopPropagation(), um zu verhindern, dass sich das Ereignis weiter ausbreitet.

document.getElementById("child").addEventListener("click", function(event) {
  event.stopPropagation();
  console.log("Child clicked");
});

3. Ereigniserfassung (Trickling)

In der Erfassungsphase wandert das Ereignis von der Wurzel des DOM-Baums bis zum Zielelement.

Beispiel:

document.getElementById("parent").addEventListener(
  "click",
  function() {
    console.log("Parent clicked");
  },
  true // Enables capturing phase
);

document.getElementById("child").addEventListener("click", function() {
  console.log("Child clicked");
});

Ausgabe beim Klicken auf den Button:

Parent clicked
Child clicked

• Das Ereignis wird vom Elternteil erfasst, bevor es das Kind erreicht.

4. Vergleich von Sprudeln und Einfangen

5. Veranstaltungsdelegation

Ereignisdelegation nutzt das Ereignis-Bubbling, um Ereignisse für mehrere untergeordnete Elemente effizient zu verarbeiten.

Beispiel:

<div>





<pre class="brush:php;toolbar:false">document.getElementById("parent").addEventListener("click", function() {
  console.log("Parent clicked");
});

document.getElementById("child").addEventListener("click", function() {
  console.log("Child clicked");
});

• Ein einzelner Ereignis-Listener auf der UL verarbeitet Klicks für alle Li-Elemente.

6. Standardverhalten verhindern

Verwenden Sie die Methode „preventDefault()“, um das Standardverhalten eines Elements zu stoppen, ohne die Weitergabe zu beeinträchtigen.

Beispiel:

Child clicked
Parent clicked

7. Praktischer Anwendungsfall: Formularvalidierung

document.getElementById("child").addEventListener("click", function(event) {
  event.stopPropagation();
  console.log("Child clicked");
});

8. Zusammenfassung

• Ereignis-Bubbling überträgt Ereignisse vom Zielelement aufwärts an Vorfahren.
• Bei der Ereigniserfassung werden Ereignisse von der Wurzel bis zum Zielelement weitergegeben.
• Verwenden Sie stopPropagation(), um die Weitergabe zu stoppen, und PreventDefault(), um Standardaktionen abzubrechen.
• Die Ereignisdelegation ist eine leistungsstarke Technik zur effizienten Verwaltung von Ereignissen auf dynamischen Elementen.

Die Beherrschung des Ereignis-Bubblings und -Erfassens gewährleistet eine bessere Kontrolle über ereignisgesteuerte Anwendungen und verbessert die Codeeffizienz.

Hallo, ich bin Abhay Singh Kathayat!
Ich bin ein Full-Stack-Entwickler mit Fachwissen sowohl in Front-End- als auch in Back-End-Technologien. Ich arbeite mit einer Vielzahl von Programmiersprachen und Frameworks, um effiziente, skalierbare und benutzerfreundliche Anwendungen zu erstellen.
Sie können mich gerne unter meiner geschäftlichen E-Mail-Adresse erreichen: kaashshorts28@gmail.com.

Das obige ist der detaillierte Inhalt vonBeherrschen von Event-Bubbling und -Capturing in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!