Detaillierte Erklärung basierend auf Event Bubbling, Event Capture und Event Delegation

Ereignis-Bubbling, Ereigniserfassung und Ereignisdelegierung

In JavaScript ist die Ereignisdelegierung eine sehr wichtige Sache. Die Ereignisdelegierung basiert auf dem Mechanismus des Ereignisaufblasens und -aufnehmens. Lassen Sie mich zunächst das Ereignisaufblasen und -aufnehmen erklären:

Das Weiterleiten von Ereignissen wird vom aktuell ausgelösten Ereignisziel aus jeweils eine Ebene nach oben weitergegeben und nacheinander ausgelöst, bis das Dokument erreicht wird.
Die Ereigniserfassung beginnt beim Dokument und wird Ebene für Ebene weitergereicht, bis das eigentliche Ereignisziel erreicht ist.

Ist das ein bisschen abstrakt? Tatsächlich ist es so, als würde ich auf der Tastatur tippen. Wenn ich auf der Tastatur tippe, tippe ich dann auch auf dem Computer? Ich gebe Ihnen ein Beispiel, damit Sie es verstehen:

<!DOCTYPE html>
<html>
    <Kopf>
        <meta charset="UTF-8">
        <Titel></Titel>
    </Kopf>
    <style type="text/css">
        #box1 { Breite: 300px; Höhe: 300px; Hintergrund: blauviolett; }
        #box2 { Breite: 200px; Höhe: 200px; Hintergrund: Aquamarin; }
        #box3 { Breite: 100px; Höhe: 100px; Hintergrund: Tomate; }
        div { Überlauf: versteckt; Rand: 50px auto; }
    </Stil>
    <Text>
        <div id="box1">
            <div id="box2">
                <div id="box3"></div>
            </div>
        </div>
        <Skript>
            Funktion sayBox3() {
                console.log('Sie haben auf das innerste Kästchen geklickt');
            }
            Funktion sayBox2() {
                console.log('Sie haben auf das mittlere Feld geklickt');
            }
            Funktion sayBox1() {
                console.log('Sie haben auf das äußerste Kästchen geklickt');
            }
            // Ereignisüberwachung, der dritte Parameter ist ein Boolescher Wert, der Standardwert ist „false“, „false“ bedeutet Ereignisaufsteigen, „true“ bedeutet Ereigniserfassung document.getElementById('box3').addEventListener('click', sayBox3, false);
            document.getElementById('box2').addEventListener('klicken', sayBox2, false);
            document.getElementById('box1').addEventListener('klicken', sayBox1, false);
        </Skript>
    </body>
</html>

Wir haben drei Boxen gezeichnet, die über- und untergeordnete Boxen sind, und jede Box ist an ein Druckereignis gebunden. Klicken wir nun auf die rote Box in der Mitte:

Wir haben festgestellt, dass wir nur auf das rote Kästchen geklickt haben, aber auch die grünen und violetten Kästchen haben das Druckereignis ausgelöst. Die Reihenfolge der Verstöße war rot>grün>violett. Dieses Phänomen ist ein Ereignisblasen.

Versuchen wir es noch einmal mit der Ereigniserfassung. Ändern Sie den dritten Parameter des Ereignislisteners im obigen Code in „true“ und klicken Sie dann auf das rote Kästchen:

Wir klicken immer noch nur auf das rote Kästchen in der Mitte. Wie beim letzten Mal werden in allen drei Kästchen Ereignisse ausgelöst, allerdings in umgekehrter Reihenfolge: lila > grün > rot. Dieses Phänomen nennt man Ereigniserfassung.

Anhand der obigen Beispiele sollte es leicht sein, das Ereignis-Bubbling und die Ereigniserfassung zu verstehen. Normalerweise verwenden wir standardmäßig das Bubbling, und das Bubbling wird bis zum Stammdokument fortgesetzt.

Lassen Sie uns nun über die Ereignisdelegierung sprechen, die auch als Ereignisproxy bezeichnet wird. Lassen Sie es uns anhand eines allgemeinen Beispiels erklären:

Drei Kollegen werden am Montag voraussichtlich einen Kurier empfangen. Es gibt zwei Möglichkeiten, für den Kurier zu unterschreiben: 1. Drei Personen warten am Firmentor auf den Kurier. 2. Beauftragen Sie den MM an der Rezeption, in ihrem Namen zu unterschreiben. In der Realität entscheiden sich die meisten von uns für die Delegationslösung (das Unternehmen duldet es nicht, dass so viele Mitarbeiter vor der Tür stehen und auf eine Expresslieferung warten). Nachdem die MM an der Rezeption den Express erhalten hat, ermittelt sie den Empfänger, unterschreibt entsprechend den Anforderungen des Empfängers und zahlt sogar in seinem Namen. Diese Lösung hat außerdem einen Vorteil: Auch wenn das Unternehmen neue Mitarbeiter hat (egal wie viele), überprüft und unterschreibt das MM an der Rezeption nach Erhalt die an den neuen Mitarbeiter gesendete Expresslieferung (Ereignisse können auch an Knoten gebunden werden, die vorübergehend nicht vorhanden sind).

Nehmen wir ein anderes Beispiel:

Jetzt gibt es eine ul, und sie enthält 100 li. Ich möchte ein Klickereignis an diese 100 li binden. Normalerweise können wir es über eine for-Schleife binden, aber was ist, wenn es 1000 li gibt? Um die Effizienz und Geschwindigkeit zu verbessern, können wir zu diesem Zeitpunkt die Ereignisdelegierung verwenden und nur ein Ereignis an ul binden. Gemäß der Ereignis-Bubbling-Regel wird das gebundene Ereignis von ul ausgelöst, sobald Sie auf jedes li in ul klicken. Durch einige Beurteilungen in der Funktion des ul-Bindungsereignisses können wir Klickereignisse für diese 100li auslösen.

Wie Sie dies konkret umsetzen, erfahren Sie im Code:

// Wir werden hier nicht über den IE sprechen, wir werden am Ende darüber sprechen function clickLi() {
    alert('Sie haben auf li geklickt');
}
document.getElementById('isUl').addEventListener('klicken', function(ereignis) {
    // Jede Funktion hat ein Ereignisobjekt, das ein Zielattribut hat, das auf die Ereignisquelle verweist var src = event.target;
    // Wir stellen fest, dass, wenn der Name des Zielereignisquellknotens li ist, diese Funktion ausgeführt werden muss // Ziel enthält viele Attribute, wie z. B. ID-Name, Klassenname, Knotenname usw. if (src.nodeName.toLowerCase() == 'li') {
       KlickLi();
    }
});

Auf diese Weise lösen durch das Binden eines Klickereignisses an ul alle li die Funktion aus.

Was ist, wenn Sie verschiedene Funktionen an verschiedene Li binden möchten?

Angenommen, es gibt 3 Li. Wir schreiben zuerst 3 verschiedene Funktionen und legen dann für die 3 Li unterschiedliche ID-Namen fest. Anschließend können wir unterschiedliche Funktionen an unterschiedliche Li binden, indem wir beurteilen, ob der ID-Name korrekt ist:

<Text>
    <ul id="istUl">
        <li id="li01">1</li>
        <li id="li02">2</li>
        <li id="li03">3</li>
    </ul>
    <Skript>
        Funktion clickLi01() {
            alert('Sie haben auf das erste li geklickt');
        }
        Funktion clickLi02() {
            alert('Sie haben auf das zweite li geklickt');
        }
        Funktion clickLi03() {
            alert('Sie haben auf das dritte li geklickt');
        }
        document.getElementById('isUl').addEventListener('klicken', function(ereignis) {
            var srcID = Ereignis.Ziel.ID;
            wenn(srcID == 'li01'){
                klickenLi01();
            }sonst wenn(srcID == 'li02') {
                klickenLi02();
            }sonst wenn(srcID == 'li03') {
                klickenLi03();
            }
        });
    </Skript>
</body>

Dies ist die sogenannte Ereignisdelegation, die Ereignisse an verschiedene untergeordnete Elemente bindet, indem sie auf ein übergeordnetes Element lauscht, wodurch die Anzahl der Lauscherzeiten reduziert und somit die Geschwindigkeit verbessert wird.

Ist es also möglich, das Aufsteigen eines Elements zu verhindern? Die Antwort ist ja.

Wenn wir im Beispiel vom Anfang wirklich nur auf das innerste rote Kästchen klicken möchten und nicht, dass die Ereignisse der anderen beiden Kästchen ausgelöst werden, können wir Folgendes in die Funktion schreiben, die das Ereignis an das rote Kästchen bindet:

Funktion sayBox3(Ereignis) {
    // Stoppen Sie das Sprudeln event.stopPropagation();
    console.log('Sie haben auf das innerste Kästchen geklickt');
}
document.getElementById('box3').addEventListener('klicken', sayBox3, false);

Wenn wir auf diese Weise erneut auf das rote Kästchen klicken, wird nur sein eigenes Ereignis ausgelöst.

Gibt es also einen praktischen Nutzen für die Verhinderung von Blasenbildung? Die Antwort ist ja. Schauen wir uns dieses Beispiel an:

Dies ist ein modales Fenster. Die aktuelle Anforderung ist, dass wir, wenn wir auf die rote Schaltfläche klicken, zur Seite springen müssen, dann auf das weiße Dialogfeld ohne Reaktion klicken und irgendwo anders klicken müssen, um das modale Fenster zu schließen.

Hier müssen wir die Methode zur Verhinderung von Blasenbildung verwenden. Die rote Schaltfläche ist ein untergeordnetes Element des weißen Dialogfelds, und das weiße Dialogfeld ist ein untergeordnetes Element des gesamten modalen Felds. Wir fügen ein Klickereignis hinzu, um das modale Feld zu schließen, und fügen dann ein Klickereignis hinzu, das zur roten Schaltfläche springt. Dann tritt ein Problem auf. Sobald auf das weiße Dialogfeld geklickt wird, wird das modale Feld aufgrund des Blasenmechanismus ebenfalls geschlossen. Tatsächlich möchten wir keine Reaktion, wenn auf das weiße Dialogfeld geklickt wird. Zu diesem Zeitpunkt binden wir ein Klickereignis an das weiße Dialogfeld und schreiben event.stopPropagation(); in die Funktion, und das war’s.

Über IE

Ältere IE-Versionen haben Kompatibilitätsprobleme und unterstützen addEventListener() und removeEventListener() nicht. Sie haben ihre eigenen Abhörmethoden:

// Ein Ereignis hinzufügen, der Ereignisfluss wird auf das sprudelnde attachEvent (Ereignisname, Ereignisverarbeitungsfunktion) festgelegt.
//Ereignis löschen detachEvent(Ereignisname, Ereignisverarbeitungsfunktion)

Darüber hinaus ist das Ereignisobjekt im Internet Explorer window.event, die Ereignisquelle ist srcElement und auch die Methode zum Verhindern von Blasenbildung ist unterschiedlich:

Funktion() {
    // Blasenbildung im IE verhindern window.event.cancelBubble = true;
    // Holen Sie sich die Ereignisquellen-ID im IE
    var srcID = window.event.srcElement.id;
}
Funktion(Ereignis) {
    //Bubbling in Nicht-IE verhindern event.stopPropagation();
    // Holen Sie sich die Ereignisquellen-ID in einem Nicht-IE
    var srcID = Ereignis.Ziel.ID;
}

Auffüllen

Das Problem der Browserkompatibilität von js wird im Allgemeinen durch die Fähigkeitserkennung gelöst: if(){}else{}

In unserer täglichen Arbeit verwenden wir normalerweise jQuery, und der IE hat in diesen speziellen Fällen bereits Kompatibilität für uns hergestellt.

Nach jQuery Version 1.7 ist die beliebteste Ereignisüberwachungsmethode $(element).on(Ereignisname, Ausführungsfunktion). Es gibt auch eine Ereignisdelegierungsmethode $(delegiert an welches Element).on(Ereignisname, delegiertes Element, Ausführungsfunktion)

Wenn das Element am Sprudeln gehindert ist, verwenden Sie niemals die Ereignisdelegation, um Ereignisse abzuhören, da das Prinzip der Ereignisdelegation darin besteht, das Sprudeln von Ereignissen zu verwenden. Wenn das Sprudeln verhindert ist, können Sie keine Ereignisse abhören.

Das Obige ist meine persönliche Erfahrung. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.

Das könnte Sie auch interessieren:

Eine kurze Analyse des Ereignisdelegierungsmechanismus und des tiefen und flachen Kopierens in JavaScript
Prinzipien und Vorteile der Implementierung der JavaScript-Ereignisdelegation
Detaillierte Erläuterung der Beispiele für JavaScript-Ereignisüberwachung und Ereignisdelegierung
Einführung in Ereignisobjekte und Ereignisdelegierung in js
JavaScript fügt Ereignis-Listener zur Ereignisdelegierung in Batches hinzu. Detaillierter Prozess

<<: Navicat importiert CSV-Daten in MySQL

>>: So zeigen Sie die Erstellungszeit von Dateien in Linux an

Vue implementiert Studentenverwaltungsfunktion

MySQL-Fehler: Beim Versuch, eine Sperre zu erhalten, wurde ein Deadlock festgestellt. Versuchen Sie, die Transaktionslösung neu zu starten.

Finden Sie das Problem Als ich kürzlich die vorhe...

Detaillierte Erklärung basierend auf Event Bubbling, Event Capture und Event Delegation

Ereignis-Bubbling, Ereigniserfassung und Ereignisdelegierung

Nehmen wir ein anderes Beispiel:

Was ist, wenn Sie verschiedene Funktionen an verschiedene Li binden möchten?

Über IE

Auffüllen

Vue implementiert Studentenverwaltungsfunktion

Tutorial zur Verwendung von Profilen in MySQL

Detailliertes Tutorial zur Installation und Verwendung von MySQL 8.0.15 unter Windows

Docker Gitlab+Jenkins+Harbor erstellt einen persistenten Plattformbetrieb

So ändern Sie den Bildlaufleistenstil in Vue

So verwenden Sie das Vue-Router-Routing

jQuery erzielt den Effekt einer Werbung, die nach oben und unten gescrollt wird

Natives JS zur Realisierung eines einfachen Schlangenspiels

JavaScript implementiert den Front-End-Countdown-Effekt

JavaScript-Implementierung eines einfachen Additionsrechners

Artikel empfehlen

Der neue TypeScript-Schnellstart-Übungsbericht des Partners Vue

Detaillierte Erklärung zum Erstellen eines CDN-Servers mit Nginx (Bild und Text)

Verwenden von Schleifen in awk

MySQL-Fehler: Beim Versuch, eine Sperre zu erhalten, wurde ein Deadlock festgestellt. Versuchen Sie, die Transaktionslösung neu zu starten.

Vue implementiert die Bottom-Query-Funktion

Was sind die Unterschiede zwischen SQL und MySQL

WeChat-Applet implementiert Taschenrechnerfunktion

Beispielcode zur Implementierung einer Anmelde- und Registrierungsvorlage in Vue

Java importiert Daten aus Excel in MySQL

Verschiedene Methoden zum Aufrufen von js in einem werden herausgestellt und zur Verwendung empfohlen.

Detaillierte Erklärung des SELINUX-Arbeitsprinzips

So löschen Sie den Timer elegant in Vue

Der HTML-Seitenkopfcode ist völlig klar

Einfaches Beispiel für den Grenzwertparameter der MySQL-Paging

Gestaltung von Popup-Fenstern und schwebenden Ebenen im Webdesign