Verstehen und implementieren Sie die Prinzipien und Methoden des Event-Bubbling und der Event-Erfassung

Das Prinzip und die Implementierung von Event Bubbling und Event Capturing

Event Bubbling (Event Bubbling) und Event Capturing (Event Capturing) sind zwei verschiedene Mechanismen in JavaScript zur Behandlung von DOM-Ereignissen (Document Object Model). Das Verständnis ihrer Prinzipien und Umsetzung kann uns helfen, Ereignisse besser zu verstehen und zu bewältigen.

Prinzip des Event-Bubblings:
Event-Bubbling bedeutet, dass, wenn ein bestimmtes Ereignis in einem bestimmten DOM-Element auftritt und das Element eine Handlerfunktion für das Ereignis definiert, das Ereignis zuerst auf dem Element ausgelöst wird und dann nach oben sprudelt übergeordnetes Element des Elements, bis die Handlerfunktion des Dokumentstammelements ausgelöst wird.

Implementierungsmethode:
In JavaScript können wir die Methode addEventListener verwenden, um Ereignis-Listener zu Elementen hinzuzufügen, um eine Ereignissprudelung zu erreichen.
Das Folgende ist ein Beispiel:

// HTML代码：
<div id="outer">
  <div id="inner">
    <button id="btn">按钮</button>
  </div>
</div>

// JavaScript代码：
const outer = document.querySelector('#outer');
const inner = document.querySelector('#inner');
const btn = document.querySelector('#btn');

outer.addEventListener('click', function() {
  console.log('外层div被点击！');
});

inner.addEventListener('click', function() {
  console.log('内层div被点击！');
});

btn.addEventListener('click', function(event) {
  console.log('按钮被点击！');
  event.stopPropagation(); // 阻止事件冒泡
});

Wenn wir im obigen Code auf die Schaltfläche klicken, wird das Ereignissprudeln Schritt für Schritt vom innersten Element nach oben ausgelöst, wobei zuerst der Klickereignishandler der Schaltfläche und dann das Ereignis ausgeführt wird des inneren Div Die Handler-Funktion und schließlich die Event-Handler-Funktion des äußeren Div.

Prinzip der Ereigniserfassung:
Ereigniserfassung ist das Gegenteil von Ereignis-Bubbling. Ereigniserfassung bedeutet, vom Dokumentstammelement aus nach unten zu gehen und jedes Element des DOM-Baums zu durchlaufen, bis ein bestimmtes Ereignis ausgelöst wird.

Implementierungsmethode:
Ähnlich können wir die Methode addEventListener verwenden, um Ereignis-Listener zu Elementen hinzuzufügen und so eine Ereigniserfassung zu erreichen.
Das Folgende ist ein Beispiel:

// HTML代码：
<div id="outer">
  <div id="inner">
    <button id="btn">按钮</button>
  </div>
</div>

// JavaScript代码：
const outer = document.querySelector('#outer');
const inner = document.querySelector('#inner');
const btn = document.querySelector('#btn');

outer.addEventListener('click', function() {
  console.log('外层div被点击！');
}, true);

inner.addEventListener('click', function() {
  console.log('内层div被点击！');
}, true);

btn.addEventListener('click', function() {
  console.log('按钮被点击！');
}, true);

Wenn wir im obigen Code auf die Schaltfläche klicken, beginnt das Ereignis beim Dokumentstammelement und wird Schritt für Schritt nach unten ausgelöst, wobei zuerst der Ereignishandler des äußeren Div ausgeführt wird und dann das innere div Die Event-Handler-Funktion und schließlich die Click-Event-Handler-Funktion der Schaltfläche werden ausgeführt.

Zusammenfassung:
Event-Bubbling und Event-Capturing sind zwei verschiedene Mechanismen zur Behandlung von DOM-Ereignissen in JavaScript. Sie verbreiten Ereignisse in verschiedene Richtungen entlang des DOM-Baums. Das Bubbling von Ereignissen beginnt beim Auslöserelement und breitet sich bis zum Stammelement des Dokuments aus. Die Ereigniserfassung beginnt am Stammelement des Dokuments und breitet sich bis zum Auslöserelement aus. Mit der Methode addEventListener können wir einem Element einen Ereignis-Listener hinzufügen und im dritten Parameter festlegen, ob Ereigniserfassung oder Bubbling verwendet werden soll.

Das obige ist der detaillierte Inhalt vonVerstehen und implementieren Sie die Prinzipien und Methoden des Event-Bubbling und der Event-Erfassung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!