Detaillierte Beispiele zur Verwendung der JavaScript-Ereignisdelegierung (Proxy)

Detaillierte Beispiele zur Verwendung der JavaScript-Ereignisdelegierung (Proxy)

Einführung

veranschaulichen

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: Ereignisdelegierung

Voraussetzung: Eine Liste, deren Inhalt beim Anklicken eines Listenelements auftaucht.

Schreibmethode 1: Ereignisdelegation

Binden 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 gebunden

An 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 Elements

Voraussetzung: 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:
  • Prinzip der Ereignisdelegierung in JavaScript
  • Detaillierte Erklärung der JS-Ereignisdelegation
  • Prinzip der Ereignisdelegierung in JavaScript und Analyse von Anwendungsbeispielen
  • js-Ereignisdelegierung und Ereignisproxy-Fallfreigabe
  • Detaillierte Erklärung des JS-Ereignisproxys (Delegierter)
  • JS-Eventbindung, Eventüberwachung und Eventdelegierung im Detail

<<:  Bild-Scrolling-Effekt mit CSS3 erstellt

>>:  Beispiel für den Export und Import von Docker-Containern

Artikel empfehlen

Verwenden der Outline-Offset-Eigenschaft in CSS zum Implementieren eines Pluszeichens

Angenommen, es gibt einen solchen Anfangscode: &l...

MySQL etabliert eine effiziente Indexbeispielanalyse

Dieser Artikel beschreibt anhand von Beispielen, ...

So erstellen Sie eine gespeicherte Prozedur in MySQL und fügen Datensätze in einer Schleife hinzu

Dieser Artikel beschreibt anhand eines Beispiels,...

Einige Kenntnisse über die absolute und relative Positionierung von Seitenelementen

Ab heute werde ich regelmäßig kleine Wissenspunkte...

MySQL 8.0.17 Installations- und einfaches Konfigurationstutorial unter macOS

Wenn Sie nicht verstehen, was ich geschrieben hab...

SQL-Implementierung von LeetCode (183. Kunden, die noch nie eine Bestellung aufgegeben haben)

[LeetCode] 183.Kunden, die nie bestellen Angenomm...

Zusammenfassung der Methoden zum Schreiben von Urteilsaussagen in MySQL

So schreiben Sie Urteilsaussagen in MySQL: Method...

So installieren Sie Nginx schnell unter Linux

Inhaltsverzeichnis Was ist nginx 1. Laden Sie die...

Eine einfache Methode, um mit der TabBar am unteren Rand des WeChat-Applets umzugehen, das Inhalte blockiert

Nach der Konfiguration der TabBar im WeChat-Apple...

Tutorial-Analyse der Schnellinstallation von mysql5.7 basierend auf centos7

eins. wget https://dev.mysql.com/get/mysql57-comm...

Zusammenfassung der wichtigsten Erkenntnisse des Vue-Entwicklungshandbuchs

Inhaltsverzeichnis Überblick 0. Grundlagen von Ja...

JavaScript zum Implementieren einer einfachen Uhr

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Einführung in die Linux-Firewall iptables, Konfigurationsmethode und Fall

1.1 Einführung in die iptables-Firewall Netfilter...

So teilen Sie Daten in MySQL-Tabellen und -Datenbanken auf

Inhaltsverzeichnis 1. Vertikales (längsseitiges) ...

Details zum JavaScript-Abschluss

Inhaltsverzeichnis 1. Was ist ein Abschluss? 2. D...