Detaillierte Beispiele zur Verwendung der JavaScript-Ereignisdelegierung (Proxy)
Einführungveranschaulichen Dieser Artikel stellt anhand von Beispielen die Verwendung der Delegation (Delegate) von Ereignissen in JavaScript vor. Einführung in die Eventdelegation Ereignisdelegation, auch Ereignisproxy genannt, ist eine gängige Technik zum Binden von Ereignissen in JavaScript. Dabei werden die Antwortereignisse, die ursprünglich an die untergeordneten Elemente gebunden werden mussten, an die übergeordneten Elemente oder die äußeren Elemente delegiert, sodass die äußeren Elemente die Verantwortung für die Ereignisüberwachung übernehmen können. Das Prinzip der Ereignisdelegation ist das Event-Bubbling von DOM-Elementen. Vorteile der Eventdelegation 1. Sparen Sie Speicher und reduzieren Sie die Ereignisbindung Ursprünglich mussten Ereignisse an alle untergeordneten Elemente gebunden werden, nach Verwendung der Ereignisdelegation ist jedoch nur eine Ereignisbindung erforderlich. 2. Ereignisse können dynamisch gebunden werden, und neu hinzugefügte Unterobjektereignisse können durch gebundene Ereignisse verarbeitet werden Denn die von den neu hinzugefügten untergeordneten Objekten generierten Ereignisse gelangen schließlich zum übergeordneten Element, sodass sie verarbeitet werden können Beispiel: EreignisdelegierungVoraussetzung: Eine Liste, deren Inhalt beim Anklicken eines Listenelements auftaucht. Schreibmethode 1: EreignisdelegationBinden Sie das Ereignis einfach an das äußere Element. <!doctype html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Dies ist der Titel</title>
</Kopf>
<Text>
<ul id="id-ul">
<li>Ich bin der erste li</li>
<li>Ich bin das zweite Li</li>
<li>Ich bin das dritte Li</li>
</ul>
<Skript>
Geben Sie ul ein, um die ID des Elements zu ändern.
ul.addEventListener("klicken", Funktion (ev) {
Alarm (ev.target.innerText);
})
</Skript>
</body>
</html>Ergebnis
Schreibmethode 2: Jedes Kindelement ist an ein Ereignis gebundenAn jedes untergeordnete Element sind Ereignisse gebunden. <!doctype html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Dies ist der Titel</title>
</Kopf>
<Text>
<ul id="id-ul">
<li>Ich bin der erste li</li>
<li>Ich bin das zweite Li</li>
<li>Ich bin das dritte Li</li>
</ul>
<Skript>
let li = document.querySelectorAll('#id-ul li');
für (lass liElement von li) {
liElement.addEventListener("klicken", Funktion (ev) {
Alarm (ev.target.innerText);
});
}
</Skript>
</body>
</html>Ergebnis
Beispiel: Hinzufügen eines neuen ElementsVoraussetzung: Bei jedem Klick auf den „Generieren“-Button wird ein Unterlistenelement generiert. Dann wird jedes Mal, wenn Sie auf ein Listenelement klicken, dessen Inhalt angezeigt. Schreibmethode 1: Ereignisdelegation <!doctype html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Dies ist der Titel</title>
</Kopf>
<Text>
<ul id="id-ul">
<li>1</li>
<li>2</li>
</ul>
<button id="btn">Klick</button>
<Skript>
sei num = 3;
let eUl = document.querySelector("#id-ul");
eButton = document.querySelector("#btn");
eButton.addEventListener("klicken", Funktion () {
let newLi = document.createElement("li");
eUl.appendChild(newLi);
newLi.innerText = num++;
})
eUl.addEventListener("klicken",Funktion (Ereignis) {
Alarm (Ereignis.Ziel.innererText);
})
</Skript>
</body>
</html>Ergebnis
Wie Sie sehen, werden Ereignisse sowohl von vorhandenen als auch von neu erstellten Elementen verarbeitet. Schreibmethode 2: Jedes Kindelement ist an ein Ereignis gebunden <!doctype html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Dies ist der Titel</title>
</Kopf>
<Text>
<ul id="id-ul">
<li>1</li>
<li>2</li>
</ul>
<button id="btn">Klick</button>
<Skript>
sei num = 3;
let eUl = document.querySelector("#id-ul");
eButton = document.querySelector("#btn");
let eLi = document.querySelectorAll("#id-ul li");
eButton.addEventListener("klicken", Funktion () {
let newLi = document.createElement("li");
eUl.appendChild(newLi);
newLi.innerText = num++;
})
für (lass eLiElement von eLi) {
eLiElement.addEventListener("klicken",Funktion (Ereignis) {
Alarm (Ereignis.Ziel.innererText);
})
}
</Skript>
</body>
</html>Ergebnis
Sie können sehen, dass die Klickereignisse der ursprünglichen Elemente verarbeitet werden, die neu hinzugefügten jedoch nicht. Damit ist dieser Artikel mit den detaillierten Anwendungsbeispielen für die JavaScript-Ereignisdelegierung abgeschlossen. Weitere relevante Inhalte zur JavaScript-Ereignisdelegierung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Bild-Scrolling-Effekt mit CSS3 erstellt
>>: Beispiel für den Export und Import von Docker-Containern
Artikel empfehlen
Binäre Typoperationen in MySQL
Dieser Artikel stellt hauptsächlich die binären O...
Lehr- oder Lernprogramm für Webdesign
Abschnitt Studieninhalte Std 1 Webdesign-Übersich...
So rufen Sie einen Hyperlink auf und öffnen ihn
<br />Die unzähligen Informationen im Intern...
So richten Sie ein Bereitstellungsprojekt unter einem Linux-System ein
1. Ändern Sie die Firewall-Einstellungen und öffn...
Docker-Container greift auf MySQL-Operationen des Hosts zu
Hintergrund: Es gibt ein Flask-Projekt, das eine ...
Beispielcode für HTML-Listenfeld, Textfeld und Dateifeld
Dropdown-Feld, Textfeld, Dateifeld Der obere Teil...
Vue.js verarbeitet Icon-Symbole über Komponenten
Icon-Icon-Verarbeitungslösung Das Ziel dieses Dat...
Eine kurze Erläuterung zur Verwendung von Slots in Vue
Definition und Verwendung: Verwenden Sie die Slot...
Das Frontend erstellt und ändert CAD-Grafikdetails über JavaScript
Inhaltsverzeichnis 1. Aktuelle Situation 2. CAD-G...
Optimierung von JavaScript und CSS zur Verbesserung der Website-Leistung
<br /> Im ersten und zweiten Teil haben wir ...
Einführung in die gängigen Festplattenverwaltungsbefehle von Linux
Inhaltsverzeichnis 1. df-Befehl 2. du-Befehl 3. B...
Praxis der Linux-Datei- und Benutzerverwaltung
1. Zeigen Sie die Dateien oder Verzeichnisse im V...
Tutorial zum Einrichten geplanter Aufgaben zum Sichern der Oracle-Datenbank unter Linux
1. Überprüfen Sie den Zeichensatz der Datenbank D...
Verwenden von Apache ab zum Durchführen von HTTP-Leistungstests
Mac wird mit Apache-Umgebung geliefert Öffnen Sie...
MySQL kann tatsächlich verteilte Sperren implementieren
Vorwort Im vorherigen Artikel habe ich Ihnen anha...