Die Konzepte und Funktionen von Event-Bubbling und Event-Delegation

Was sind JS-Event-Bubbling und Event-Delegation? Spezifische Codebeispiele sind erforderlich.

Event-Bubbling (Event-Bubbling) und Event-Delegation (Event-Delegation) sind zwei wichtige Konzepte im Zusammenhang mit der Ereignisverarbeitung in JS. In diesem Artikel werden beide Konzepte ausführlich vorgestellt und spezifische Codebeispiele bereitgestellt, um ihre Verwendungs- und Implementierungsprinzipien zu erläutern.

1. Event-Bubbling

Event-Bubbling bedeutet, dass, wenn ein Ereignis (z. B. ein Klickereignis) auf einem Element auftritt und das Element einen Ereignishandler definiert, das Ereignis zuerst ausgelöst wird und sich das Ereignis dann ausbreitet Das aktuelle Element wird Ebene für Ebene zum übergeordneten Element verschoben, bis es das Stammelement des Dokuments erreicht.

Der Event-Bubbling-Mechanismus ermöglicht es uns, den gleichen Event-Handler problemlos mehreren untergeordneten Elementen eines übergeordneten Elements hinzuzufügen, ohne für jedes untergeordnete Element separate Event-Handler definieren zu müssen. Dies vereinfacht den Code und macht ihn wartbarer.

Das Folgende ist ein Codebeispiel für das Ereignis-Bubbling:

HTML-Code:

<div id="parent">
  <div id="child1">子元素1</div>
  <div id="child2">子元素2</div>
</div>

JS-Code:

const parent = document.querySelector('#parent');
const child1 = document.querySelector('#child1');
const child2 = document.querySelector('#child2');

parent.addEventListener('click', function(event) {
  console.log('触发父元素的点击事件');
});

child1.addEventListener('click', function(event) {
  console.log('触发子元素1的点击事件');
  event.stopPropagation();
});

child2.addEventListener('click', function(event) {
  console.log('触发子元素2的点击事件');
  event.stopPropagation();
});

Wenn wir im obigen Code auf untergeordnetes Element 1 oder untergeordnetes Element 2 klicken, gibt die Konsole der Reihe nach Folgendes aus:

触发子元素1的点击事件
触发父元素的点击事件

Der Event-Handler des übergeordneten Elements wird nur ausgelöst, wenn das Ereignis zum übergeordneten Element übergeht. Verhindern Sie, dass die Veranstaltung in die Höhe sprudelt, indem Sie event.stopPropagation() anrufen.

2. Ereignisdelegation

Ereignisdelegation bezieht sich auf die Bindung des Ereignishandlers an das übergeordnete Element und die Bestimmung, ob die entsprechende Operation ausgeführt werden soll, indem das ursprüngliche Ziel des Ereignisses (event.target) beurteilt wird.

Der Vorteil der Ereignisdelegierung besteht darin, dass beim Hinzufügen eines neuen untergeordneten Elements zum übergeordneten Element kein separater Ereignishandler an das neue untergeordnete Element gebunden werden muss, sondern das Ereignis direkt über das übergeordnete Element verarbeitet wird. Dadurch kann die Anzahl der Event-Handler erheblich reduziert und die Leistung verbessert werden.

Das Folgende ist ein Codebeispiel für die Ereignisdelegierung:

HTML-Code:

<ul id="parent">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

JS-Code:

const parent = document.querySelector('#parent');

parent.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    const textContent = event.target.textContent;
    console.log('点击了项目：' + textContent);
  }
});

Wenn wir im obigen Code auf ein beliebiges li-Element klicken, gibt die Konsole den Text des angeklickten Elementinhalts aus . Unabhängig davon, wie viele li-Elemente später hinzugefügt werden, werden ihre Klickereignisse vom übergeordneten Element verarbeitet.

Das Prinzip der Event-Delegation wird durch Event-Bubbling umgesetzt. Das Ereignis sprudelt zunächst zum übergeordneten Element und wird dann anhand des ursprünglichen Ziels des Ereignisses beurteilt, um zu bestimmen, ob die entsprechende Aktion ausgeführt werden muss.

Zusammenfassung:

Event-Bubbling und Event-Delegation sind wichtige Konzepte im Zusammenhang mit der Event-Verarbeitung in JS. Durch das Event-Bubbling können wir den gleichen Event-Handler einfach zu mehreren untergeordneten Elementen des übergeordneten Elements hinzufügen und so die Wiederverwendbarkeit des Codes verbessern. Durch die Ereignisdelegierung wird der Event-Handler basierend auf dem ursprünglichen Ziel des Ereignisses gebunden entsprechende Operation, verbessern Sie die Leistung und reduzieren Sie die Codemenge. Wenn Sie in der tatsächlichen Entwicklung Event-Bubbling und Event-Delegation entsprechend Ihren Anforderungen verwenden, können Sie eleganten und effizienten Code schreiben.

Das obige ist der detaillierte Inhalt vonDie Konzepte und Funktionen von Event-Bubbling und Event-Delegation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!