Technische Prinzipien der JavaScript-Ereignisdelegierung

Eine der heißesten Technologien in der heutigen Welt der JavaScript-Technologie dürfte die „Ereignisdelegation“ sein. Durch die Verwendung von Ereignisdelegierungstechniken können Sie das Hinzufügen von Ereignis-Listenern zu jedem einzelnen Knoten vermeiden. Stattdessen werden Ereignis-Listener zu ihren übergeordneten Elementen hinzugefügt. Der Ereignis-Listener analysiert die Ereignisse, die aus den untergeordneten Elementen hervorgehen, und findet heraus, von welchem ​​untergeordneten Element das Ereignis stammt. Das Grundkonzept ist sehr einfach, aber es gibt immer noch viele Leute, die nicht verstehen, wie die Delegation von Ereignissen funktioniert. Hier werde ich erklären, wie die Ereignisdelegierung funktioniert, und einige Beispiele für die grundlegende Ereignisdelegierung in reinem JavaScript bereitstellen.

Angenommen, wir haben ein UL-Element mit mehreren untergeordneten Elementen:

<ul id="parent-list">
	<li id="post-1">Item 1</li>
	<li id="post-2">Item 2</li>
	<li id="post-3">Item 3</li>
	<li id="post-4">Item 4</li>
	<li id="post-5">Item 5</li>
	<li id="post-6">Item 6</li>
</ul>

Wir gehen außerdem davon aus, dass beim Klicken auf jedes untergeordnete Element ein anderes Ereignis eintritt. Sie können jedem unabhängigen li-Element Ereignis-Listener hinzufügen, aber manchmal können diese li-Elemente gelöscht oder hinzugefügt werden, und die Überwachung ihrer neuen oder gelöschten Ereignisse wird ein Albtraum sein, insbesondere wenn Ihr Ereignis-Listening-Code in einem anderen platziert wird Platz in Ihrer Bewerbung. Was aber, wenn Sie Listener auf ihren übergeordneten Elementen platzieren? Woher wissen Sie, auf welches untergeordnete Element geklickt wurde?

Einfach: Wenn das Ereignis des untergeordneten Elements zum übergeordneten ul-Element übergeht, können Sie die Zieleigenschaft des Ereignisobjekts überprüfen, um einen Verweis auf das Knotenelement zu erfassen, auf das tatsächlich geklickt wurde. Das Folgende ist ein sehr einfacher JavaScript-Code, der den Prozess der Ereignisdelegierung demonstriert:

// 找到父元素，添加监听器...
document.getElementById("parent-list").addEventListener("click",function(e) {
	// e.target是被点击的元素!
	// 如果被点击的是li元素
	if(e.target && e.target.nodeName == "LI") {
		// 找到目标，输出ID!
		console.log("List item ",e.target.id.replace("post-")," was clicked!");
	}
});

Der erste Schritt besteht darin, dem übergeordneten Element einen Ereignis-Listener hinzuzufügen. Wenn ein Ereignis den Listener auslöst, überprüfen Sie die Quelle des Ereignisses und schließen Sie Ereignisse aus, die nicht zu li untergeordneten Elementen gehören. Wenn es sich um ein li-Element handelt, haben wir unser Ziel gefunden! Wenn es kein li-Element ist, wird das Ereignis ignoriert. Dieses Beispiel ist sehr einfach, UL und li sind Standard-Eltern-Kind-Kombinationen. Lassen Sie uns mit einigen verschiedenen Kombinationen von Elementen experimentieren. Angenommen, wir haben ein übergeordnetes Element p mit vielen untergeordneten Elementen darin, aber was uns wichtig ist, ist ein A-Tag mit der CSS-Klasse „classA“ darin:

// 获得父元素p, 添加监听器...
document.getElementById("myp").addEventListener("click",function(e) {
	// e.target是被点击的元素
	if(e.target && e.target.nodeName == "A") {
		// 获得CSS类名
		var classes = e.target.className.split(" ");
		// 搜索匹配!
		if(classes) {
			// For every CSS class the element has...
			for(var x = 0; x < classes.length; x++) {
				// If it has the CSS class we want...
				if(classes[x] == "classA") {
					// Bingo!
					console.log("Anchor element clicked!");

					// Now do something here....

				}
			}
		}

	}
});

Im obigen Beispiel sind es nicht nur die Tags verglichene Namen und verglichene CSS-Klassennamen. Obwohl es etwas komplizierter ist, ist es dennoch sehr repräsentativ. Wenn es beispielsweise ein span-Tag in einem A-Tag gibt, wird dieses span zum Zielelement. Zu diesem Zeitpunkt müssen wir die DOM-Baumstruktur verfolgen, um herauszufinden, ob darin ein A.classA-Element vorhanden ist.

Da die meisten Programmierer Toolbibliotheken wie jQuery verwenden, um DOM-Elemente und -Ereignisse zu verarbeiten, empfehle ich jedem, die darin enthaltene Ereignisdelegierungsmethode zu verwenden, da die Toolbibliothek hier erweiterte Delegationsmethoden und Elementüberprüfungsmethoden bereitstellt.

Ich hoffe, dass dieser Artikel Ihnen helfen kann, die Prinzipien hinter den Kulissen der JavaScript-Ereignisdelegierung zu verstehen, und ich hoffe, dass Sie auch den leistungsstarken Nutzen der Ereignisdelegation spüren!

(Englisch: davidwalsh.)

Empfohlenes Tutorial: „JavaScript Basics Tutorial“

Das obige ist der detaillierte Inhalt vonTechnische Prinzipien der JavaScript-Ereignisdelegierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!