Beispiele für technische Prinzipien der JavaScript-Ereignisdelegation_Javascript-Fähigkeiten

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:

Code kopieren Der Code lautet wie folgt:

• Item 1
post -2">Item 2

• Item 3


• Item 4< ; /li>
  
• Item 5
• Item 6
; /ul>



Wir gehen außerdem davon aus, dass beim Klicken auf jedes untergeordnete Element ein anderes Ereignis auftritt. Sie können jedem unabhängigen Li-Element Ereignis-Listener hinzufügen. Manchmal werden diese Li-Elemente jedoch gelöscht oder hinzugefügt, und das Abhören ihrer neuen oder gelöschten Ereignisse ist ein Albtraum, insbesondere wenn Ihr Code, der das Ereignis abhört, in einem anderen platziert wird Platz in der 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 das Zielattribut des Ereignisobjekts überprüfen und die Referenz des Knotenelements erfassen, auf das tatsächlich geklickt wurde. Das Folgende ist ein sehr einfacher JavaScript-Code, der den Prozess der Ereignisdelegierung demonstriert:

Kopieren Sie den Code

Der Code lautet wie folgt: // Finden Sie das übergeordnete Element und fügen Sie einen Listener hinzu...

document.getElementById("parent-list").addEventListener("click",function(e) {

// e .target ist das angeklickte Element!
// Wenn das li-Element angeklickt wird
if(e.target && e.target.nodeName == "LI") {
// Finden die Ziel- und Ausgabe-ID!
console.log("List item ",e.target.id.replace("post-")," wurde angeklickt!"
}



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 nicht-li-untergeordnete Elementereignisse aus. Wenn es sich um ein Li-Element handelt, haben wir das Ziel gefunden! Wenn es sich nicht um ein li-Element handelt, 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 div mit vielen untergeordneten Elementen darin, aber was uns interessiert, ist das A-Tag darin mit der CSS-Klasse „classA“:

Code kopieren

Der Code lautet wie folgt: // Holen Sie sich das übergeordnete Element DIV, fügen Sie einen Listener hinzu ... document.getElementById("myDiv") .addEventListener ("click",function(e) {

// e.target ist das angeklickte Element

if(e.target && e.target.nodeName == "A") {
// CSS-Klassenname abrufen
varclasses = e.target.className.split(" "); Suche nach Übereinstimmungen!
if(classes) {
// Für jede CSS-Klasse das Element hat..
for(var x = 0; x // Wenn es die gewünschte CSS-Klasse hat...
if(classes[x] = = " classA") {
// Bingo!
console.log("Ankerelement angeklickt!"// Jetzt etwas hier tun...

}
}
}

}
});


Im obigen Beispiel werden nicht nur die Tag-Namen verglichen, sondern auch die CSS-Klassennamen werden verglichen. Obwohl es etwas komplizierter ist, ist es dennoch sehr repräsentativ. Wenn beispielsweise ein Span-Tag in einem A-Tag vorhanden ist, wird dieser 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 jQuery und andere Toolbibliotheken 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!