Was ist Event-Bubbling-Ereigniserfassung?

Ereignis-Bubbling und Ereigniserfassung beziehen sich auf zwei verschiedene Arten der Ereignisweitergabe bei der Verarbeitung von Ereignissen im HTML-DOM. Ausführliche Einführung: 1. Ereignisblasen bedeutet, dass sich das Ereignis vom innersten Element zum äußersten Element ausbreitet, wenn ein Element ein Ereignis auslöst. Das heißt, das Ereignis wird zuerst am Auslöseelement ausgelöst und sprudelt dann Schritt für Schritt nach oben, bis es das Wurzelelement 2 erreicht. Die Ereigniserfassung ist der umgekehrte Prozess. Das Ereignis beginnt am Wurzelelement und wird Schritt für Schritt erfasst Schritt, bis das Triggerereignis erreicht ist.

Das Betriebssystem dieses Tutorials: Windows 10-System, Dell G3-Computer.

Ereignis-Bubbling und Ereigniserfassung beziehen sich auf zwei verschiedene Arten der Ereignisweitergabe bei der Verarbeitung von Ereignissen im HTML-DOM.

Ereignisblasen bedeutet, dass sich das Ereignis vom innersten Element zum äußersten Element ausbreitet, wenn ein Element ein Ereignis auslöst. Das heißt, das Ereignis wird zuerst auf das auslösende Element ausgelöst und steigt dann an, bis es das Stammelement erreicht.

Ereigniserfassung ist der umgekehrte Prozess. Ereignisse beginnen beim Wurzelelement und werden Schritt für Schritt erfasst, bis sie das Element erreichen, das das Ereignis auslöst.

Im HTML-DOM werden Ereignisse standardmäßig durch Event-Bubbling weitergegeben. Das heißt, das Ereignis wird zuerst auf das auslösende Element ausgelöst und steigt dann auf, bis es das Stammelement erreicht.

Sie können die Ereignisweitergabemethode eindeutig über die Methode addEventListener angeben. Die Methode addEventListener kann drei Parameter akzeptieren: den zu überwachenden Ereignistyp, die Ereignisverarbeitungsfunktion und einen booleschen Wert, der zur Angabe der Ereignisweitergabemethode verwendet wird. Wenn der übergebene boolesche Wert wahr ist, bedeutet dies, dass die Ereigniserfassung verwendet wird; wenn der übergebene boolesche Wert falsch ist oder weggelassen wird, bedeutet dies, dass Ereignis-Bubbling verwendet wird.

Zum Beispiel zeigt der folgende Code den Unterschied zwischen Ereigniserfassung und Ereignis-Bubbling:

<div id="outer">
  <div id="inner">
    <button id="button">点击</button>
  </div>
</div>
<script>
var outer = document.getElementById(&#39;outer&#39;);
var inner = document.getElementById(&#39;inner&#39;);
var button = document.getElementById(&#39;button&#39;);
outer.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件冒泡 - 外层元素&#39;);
}, false);
inner.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件冒泡 - 内层元素&#39;);
}, false);
button.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件冒泡 - 按钮&#39;);
}, false);
outer.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件捕获 - 外层元素&#39;);
}, true);
inner.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件捕获 - 内层元素&#39;);
}, true);
button.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件捕获 - 按钮&#39;);
}, true);
</script>

Nach dem Ausführen des obigen Codes werden beim Klicken auf die Schaltfläche die Ereigniserfassungsphase und die Ereignis-Bubbling-Phase gestartet Die Ereignisbehandlungsfunktion wird nacheinander ausgelöst und die entsprechenden Informationen werden auf der Konsole ausgegeben.

Das obige ist der detaillierte Inhalt vonWas ist Event-Bubbling-Ereigniserfassung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!