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

Funktion Ereignis-Blubbern Ereigniserfassung

Feature	Event Bubbling	Event Capturing
Order	From target to ancestors	From root to target
Default Behavior	Enabled	Disabled unless specified
Use Case	Commonly used for delegation	Less commonly used

Bestellung Vom Ziel zu den Vorfahren Von der Wurzel zum Ziel Standardverhalten Aktiviert Deaktiviert, sofern nicht anders angegeben Anwendungsfall Wird häufig für die Delegation verwendet Weniger häufig verwendet

---

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!