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 Sie die MySQL-Master-Slave-Konfiguration, um eine Lese-/Schreibtrennung zu erreichen und den Datenbankdruck zu verringern

Um eine große Anzahl gleichzeitiger Besuche bewäl...

So fügen Sie in Linux stapelweise Dateipräfixe hinzu

Sie müssen „gt_“ vor den Dateinamen aller TXT-Dat...

Zusammenfassung einiger Tipps zum Umgehen der Node.js-Codeausführung

Inhaltsverzeichnis 1. untergeordneter Prozess 2. ...

js+css zur Realisierung eines dreistufigen Navigationsmenüs

In diesem Artikelbeispiel wird der spezifische Co...

Lösung für das Problem, dass die Seite leer ist, wenn die Seite mit der Quelldatei in IE7 geöffnet wird

Frage: Die Kodierung meines Blogs ist UTF-8. Manch...

Das Hintergrundbild der Tabelleneinstellung kann nicht zu 100 % angezeigt werden. Lösung

Während der Entwicklung wurden die folgenden Situ...

Detaillierte Schritte zur Installation eines Webservers mit Apache httpd2.4.37 auf centos8

Schritt 1: yum install httpd -y #httpd-Dienst ins...

Wie installiert und verbindet man Navicat in MySQL 8.0.20 und worauf muss man achten?

Dinge zu beachten 1. Zunächst müssen Sie im MySQL...

Vue realisiert den Fortschrittsbalken-Änderungseffekt

Dieser Artikel verwendet Vue, um einfach die Ände...

Zusammenfassung der drei Möglichkeiten zum Erstellen neuer Elemente

Erstens: über Text/HTML var txt1="<h1>...

Einführung in die Verwendung der vier wichtigsten SQL-Rankingfunktionen ROW_NUMBER, RANK, DENSE_RANK, NTILE

1. ROW_NUMBER() Definition: Die Funktion ROW_NUMB...

Detaillierte Erklärung zur Verwendung von CSS3 RGB und RGBA (transparente Farbe)

Ich glaube, jeder Mensch ist sehr sensibel für Fa...

Einige weniger bekannte Sortiermethoden in MySQL

Vorwort ORDER BY 字段名升序/降序. Ich glaube, jeder hier...

Installieren Sie Python 3.6 unter Linux und vermeiden Sie Fallstricke

Installation von Python 3 1. Abhängige Umgebung i...

Einführung in den Swap-Speicher des Linux-Systems

Swap-Speicher ist heutzutage ein gängiger Aspekt ...