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

Vue implementiert die Verpackung und Verwendung von Komponenten zur Kontrolle der Warenanzahl

Die Kapselung und Verwendung der Vue-Komponente z...

Der Button hat einen hässlichen grauen Rand. Wie kann ich ihn entfernen?

Ich habe den Dialog beim Schließen verwendet und e...

So fixieren Sie Inhalte beim Scrollen einer HTML-Seite an einer festen Position

In diesem Artikel wird hauptsächlich erläutert, w...

CentOS verwendet lokale Yum-Quellen zum Erstellen einer LAMP-Umgebung – Grafik-Tutorial

Dieser Artikel beschreibt, wie Sie mit der lokale...

Detaillierte Schritte zur Installation und Konfiguration von MySQL 8.0 auf CentOS

Vorwort Hier sind die Schritte zur Installation u...

So stellen Sie versehentlich gelöschte Nachrichtendateien unter Linux wieder her

Wenn Dateien von einem Prozess verwendet und vers...

So implementieren Sie einen einfachen HTML-Videoplayer

Dieser Artikel stellt die Methode zur Implementie...

CSS3-Filtercode zum Erreichen des Grau- oder Schwarzmodus auf Webseiten

Frontend css3.filter kann nicht nur den Graueffek...

Eine Lösung für einen Fehler in IE6 mit jquery-multiselect

Bei der Verwendung von jquery-multiselect (einem ...

Vue-Grundlagen-Tutorial: Bedingtes Rendering und Listen-Rendering

Inhaltsverzeichnis Vorwort 1.1 Funktion 1.2 So st...

Konfigurieren Sie eine Selenium-Umgebung basierend auf Linux und implementieren Sie den Betrieb

1. Selenium unter Linux verwenden 1. Installieren...

So dekomprimieren Sie mehrere Dateien mit dem Befehl „unzip“ in Linux

Lösung für das Problem, dass in Linux kein Entpac...

Erstellen Sie einen virtuellen Nginx-Host basierend auf Domänenname, Port und IP

Es gibt drei Arten von virtuellen Hosts, die von ...

CSS3 realisiert die Animation des Shuttle-Sternenhimmels

Ergebnis: html <canvas id="Sternenfeld&qu...

So installieren Sie JDK 13 in einer Linux-Umgebung mithilfe eines komprimierten Pakets

Was ist JDK? Nun, wenn Sie diese Frage nicht kenn...