JavaScript-Ereigniserfassungs-Blubbern und Erfassungsdetails

JavaScript-Ereigniserfassungs-Blubbern und Erfassungsdetails

1. Ereignisablauf

In JavaScript bezieht sich der Ereignisfluss auf DOM -Ereignisfluss.

1. Konzept

Der Ereignisausbreitungsprozess ist DOM Ereignisfluss.
Der Prozess der Ausbreitung von Ereignisobjekten im DOM wird als „Ereignisfluss“ bezeichnet.
Beispiel: Um einen Computer einzuschalten, müssen Sie zuerst Ihren Computer finden, dann Ihren Einschaltknopf finden und schließlich den Einschaltknopf mit der Hand drücken. Schließen Sie den Vorgang des Einschaltens des Computers ab. Dieser gesamte Prozess wird als Ereignisfluss bezeichnet.

2. DOM-Ereignisfluss

Auch DOM-Ereignisse haben einen Prozess. Von der Ereignisauslösung bis zur Ereignisreaktion gibt es drei Phasen.

  • Ereigniserfassungsphase
  • Im Zielstadium
  • Ereignis-Blubberphase

Im obigen Beispiel ist der Vorgang des Einschaltens des Computers wie der Ereignisfluss in JavaScript . Der Vorgang des Findens des Netzschalters ist der Vorgang der Ereigniserfassung. Nachdem Sie den Netzschalter gefunden haben, drücken Sie ihn mit der Hand. Der Vorgang, den Netzschalter mit der Hand zu drücken, befindet sich in der Zielphase. Durch Drücken des Netzschalters beginnt der Computer zu starten, was das Aufsteigen des Ereignisses ist. Die Reihenfolge ist: zuerst erfassen und dann sprudeln.

Nachdem wir nun Event Sourcing verstanden haben, schauen wir uns seine drei Prozesse an!

Ereigniserfassung:

Hinweis: Da die Ereigniserfassung von älteren Browsern (IE8 und darunter) nicht unterstützt wird, werden Ereignishandler in der Praxis normalerweise während der Bubbling-Phase ausgelöst.

Die Ereigniserfassung ist der erste Schritt im Ereignisfluss.
Wenn ein DOM-Ereignis ausgelöst wird (das Element, das das DOM-Ereignis auslöst, wird als Ereignisquelle bezeichnet), leitet der Browser das Ereignis vom Stammknoten nach innen weiter. Das heißt, Ereignisse fließen vom Stammknoten des Dokuments zum Zielobjektknoten. Unterwegs durchläuft es verschiedene Ebenen von DOM-Knoten und erreicht schließlich den Zielknoten, um die Ereigniserfassung abzuschließen.

Zielphase:

Wenn das Ereignis den Zielknoten erreicht, tritt es in die Zielphase ein. Das Ereignis wird auf dem Zielknoten ausgelöst.
Das heißt, das Ereignis wird an das Element auf der niedrigsten Ebene weitergegeben, das das Ereignis auslöst.

Ereignisaufsteigen:

Das Aufsteigen von Ereignissen erfolgt in umgekehrter Reihenfolge wie das Erfassen von Ereignissen. Die Reihenfolge der Ereigniserfassung ist von außen nach innen, und die Ereignisweiterleitung erfolgt von innen nach außen.
Wenn das Ereignis an die Zielphase weitergegeben wird, wird das Element in der Zielphase die empfangene Zeit nach oben weitergeben, d. h. es wird entlang des vom Ereignis erfassten Pfads in umgekehrter Richtung weitergegeben und schrittweise nach oben zu den Vorgängerelementen des Elements weitergegeben. Bis zum Fensterobjekt.

Schauen wir uns ein Beispiel an. Das Klicken auf Box3 löst die Klickereignisse von Box2 und Box1 aus.

<!DOCTYPE html>
<html>

<Kopf>
    <meta charset="UTF-8">
    <title>JavaScript-Ereignis-Bubbling</title>
</Kopf>
<style type="text/css">
    #box1 { Hintergrund: blauviolett;}
    #box2 {Hintergrund: Aquamarin;}
    #box3 {Hintergrund: Tomate;}
    div { Polsterung: 40px; Rand: auto;}
</Stil>

<Text>
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <Skript>
        fenster.onload = Funktion () {
            const box1 = document.getElementById('box1')
            const box2 = document.getElementById('box2')
            const box3 = document.getElementById('box3')
            box1.onclick = sageBox1;
            box2.onclick = sageBox2;
            box3.onclick = sayBox3;
            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');
            }
        }
    </Skript>
</body>

</html>

Derzeit lautet die Ausbreitungsreihenfolge der Klickerfassung:
Fenster -> Dokument -> <html> -> <body> -> <div #box1> -> <div #box2> -> <div #box3>
Derzeit lautet die Ausbreitungsreihenfolge des Klick-Bubblings:
<div #box3> -> <div #box2> -> <div #box1> -> <body> -> <html> -> Dokument -> Fenster

Moderne Browser beginnen alle mit der Erfassung von Ereignissen vom window , und die letzte Station des Aufsteigens ist auch window Fensterobjekt. Browser der IE8- und niedrigeren Versionen verweisen nur auf document .
Ereignisblasenbildung: Wird durch die HTML Struktur des Elements bestimmt, nicht durch die Position des Elements auf der Seite. Selbst wenn das Element durch Positionierung oder Schweben außerhalb des Gültigkeitsbereichs des übergeordneten Elements liegt, ist das Blasenphänomen beim Klicken auf das Element weiterhin vorhanden.

Nachdem wir nun die drei Phasen des Ereignisflusses kennen, was können wir mit dieser Funktion tun?

2. Veranstaltungsdelegation

Stellen Sie sich ein Szenario vor, in dem Sie eine Reihe von <li>-Tags unter einem <ul> -Tag haben und onclick -Ereignisse an alle <li> -Tags binden müssen. Wir können dieses Problem mit einer Schleife lösen, aber gibt es einen einfacheren Weg?
Wir können dem gemeinsamen übergeordneten Element <ul> dieser <li> ein onclick -Ereignis hinzufügen. Wenn dann ein beliebiges <li> -Tag darin ein onclick -Ereignis auslöst, wird onclick Ereignis über den Bubbling-Mechanismus zur Verarbeitung an <ul> weitergegeben. Dieses Verhalten wird als Ereignisdelegation bezeichnet <li> verwendet Event Bubbling, um Ereignisse an <ul> zu delegieren.
Sie können die Ereigniserfassung auch zum Delegieren von Ereignissen verwenden. Die Verwendung ist die gleiche, nur in umgekehrter Reihenfolge.

  <ul id="meineUl">
    <li>Punkt 1</li>
    <li>Punkt 2</li>
    <li>Punkt 3</li>
    ...
  </ul>

Es ist vielleicht immer noch ein wenig schwer zu verstehen. Einfach ausgedrückt geht es darum, Event Bubbling zu verwenden, um Ereignisse eines Elements an sein übergeordnetes Element zu delegieren.

Um ein Beispiel aus dem wirklichen Leben zu geben: Am Double Eleven kommen Expresslieferungen an. Der Kurier liefert die Expresslieferungen normalerweise an jeden Haushalt von Tür zu Tür, was ineffizient ist. Der Kurier kam auf die Idee, alle Expresslieferungen einer Gemeinde in einer Kurierstation innerhalb der Gemeinde unterzubringen und die Zustellung der Expresslieferungen zu delegieren. Die Empfänger in der Gemeinde können mit dem Abholcode zur Kurierstation gehen, um ihre Expresslieferungen abzuholen.
Hier ist der Kurier, der das Paket liefert, ein Ereignis, der Empfänger ist das Element, das auf das Ereignis reagiert, und die Poststation entspricht dem Proxy-Element. Der Empfänger geht zur Poststation, um das Paket mit dem Empfangscode abzuholen, was die Ereignisausführung darstellt. Das Proxy-Element bestimmt, ob das aktuelle Antwortereignis mit dem ausgelösten spezifischen Ereignis übereinstimmt.

Doch welche Vorteile bietet dies?

1. Vorteile der Eventdelegation

Die Delegation von Veranstaltungen hat zwei Vorteile

  • Reduzieren Sie die Speichernutzung
  • Dynamisch bindende Ereignisse

Reduzieren Sie den Speicherverbrauch und optimieren Sie die Seitenleistung

In JavaScript ist jeder Event-Handler ein Objekt und Objekte belegen den Seitenspeicher. Je mehr Objekte sich im Speicher befinden, desto schlechter ist die Seitenleistung. Darüber hinaus führen DOM Operationen dazu, dass der Browser die Seite neu anordnet und neu zeichnet (falls dies nicht klar ist, können Sie sich über den Seiten-Rendering-Prozess informieren). Zu viele DOM-Operationen beeinträchtigen die Leistung der Seite. Eine der Hauptideen der Leistungsoptimierung besteht darin, Reflow und Neuzeichnen zu minimieren, d. h. DOM Operationen zu reduzieren.

Im obigen Beispiel zum Binden des onclick Ereignisses an das <li> -Tag bedeutet die Verwendung der Ereignisdelegierung, dass es nicht notwendig ist, eine Funktion an jedes <li>-Tag zu binden. Sie müssen sie nur einmal an das <ul>-Tag binden. Wenn es eine große Anzahl von li-Tags gibt, wird dies zweifellos den Speicherverbrauch erheblich reduzieren und die Effizienz steigern.

Ereignisse dynamisch binden:

Wenn das untergeordnete Element unsicher ist oder dynamisch generiert wird, können Sie das übergeordnete Element überwachen, anstatt das untergeordnete Element zu überwachen.
Auch im obigen Beispiel der Bindung des onclick Ereignisses an das <li> -Tag ist die Anzahl dieser <li> -Tags oft nicht festgelegt und einige <li> -Tags werden basierend auf Benutzervorgängen hinzugefügt oder gelöscht. Jedes Mal, wenn Sie ein Tag hinzufügen oder löschen, müssen Sie das entsprechende Ereignis erneut an das neu hinzugefügte oder gelöschte Element binden bzw. die Bindung daran aufheben.

Durch die Verwendung der Ereignisdelegierung müssen Sie nicht jedes <li> bearbeiten. Sie müssen es nur einmal an <ul> binden. Da das Ereignis an <ul> gebunden ist, kann das <li> -Element <ul> nicht beeinflussen. Die Ausführung des <li> -Elements wird im Prozess der tatsächlichen Reaktion auf die Ausführung der Ereignisfunktion abgestimmt. Daher kann die Verwendung der Ereignisdelegierung bei der dynamischen Bindung von Ereignissen viel sich wiederholende Arbeit reduzieren.

Nachdem wir nun die Vorteile der Eventdelegation kennen, stellt sich die Frage, wie wir sie nutzen können.

2. Nutzung der Event-Delegation

Die Verwendung der Ereignisdelegation erfordert addEventListener() zur Ereignisüberwachung.
Die Methode registriert den angegebenen Listener für das Objekt, das die Funktion aufruft. Wenn das Objekt das angegebene Ereignis auslöst, wird die angegebene Rückruffunktion ausgeführt.

Verwendung:

Element.addEventListener(Ereignistyp, Funktion, useCapture);
Parameter Erforderlich/Optional beschreiben
Ereignistyp Erforderlich Gibt den Ereignistyp an.
Funktion Erforderlich Geben Sie die Rückruffunktion an, nachdem das Ereignis ausgelöst wurde.
verwendenCapture Optional Gibt an, ob das Ereignis in der Erfassungsphase oder der Bubbling-Phase ausgeführt wird.

Der dritte Parameter useCapture ist ein Boolean-Typ, der Standardwert ist false

  • true - gibt an, dass das Ereignis während der Erfassungsphase ausgeführt wird
  • false- gibt an, dass das Ereignis in der Bubbling-Phase ausgeführt wird

Schauen Sie sich das folgende Beispiel an:

<!DOCTYPE html>
<html>

<Kopf>
  <meta charset="UTF-8">
  <title>JavaScript-Ereignisdelegierung</title>
</Kopf>

<Text>

  <ul>
    <li>Punkt 1</li>
    <li>Punkt 2</li>
    <li>Punkt 3</li>
    <li>Punkt 4</li>
  </ul>

  <Skript>
    const myUl = document.getElementsByTagName("ul")[0];

    myUl.addEventListener("klicken", myUlFn);

    Funktion meinUlFn(e) {
      if (e.target.tagName.toLowerCase() === 'li') { // Bestimmen Sie, ob es sich um das anzuklickende Element handelt console.log(`Sie haben auf ${e.target.innerText} geklickt`);
      }
    }

  </Skript>
</body>

</html>

Hinweis: Dies ist eine allgemeine Methode zur Ereignisdelegierung, aber bei dieser Schreibmethode gibt es ein Problem. Das heißt, wenn sich in _<li>_ untergeordnete Elemente befinden, wird durch Klicken auf dieses untergeordnete Element das Ereignis nicht ausgelöst. Diese Frage ist eine Falle.

Event-Bubbling ist manchmal wirklich nützlich, kann aber manchmal auch nervig sein. Kann man es abbrechen, wenn man es nicht braucht?

3. Verhindern Sie das Aufsprudeln und Erfassen von Ereignissen

Hinweis: Nicht alle Ereignisse werden angezeigt, z. B. Fokussieren, Unschärfe, Ändern, Senden, Zurücksetzen, Auswählen usw.

Um das Bubbling und Capturing zu deaktivieren, können Sie die stopPropagation()。
stopPropagation() stoppt die weitere Ausbreitung des aktuellen Ereignisses in den Erfassungs- und Bubbling-Phasen.
Mit dieser Methode wird das Aufsteigen des Ereignisses verhindert. Das Aufsteigen erfolgt, aber das Standardereignis wird trotzdem ausgeführt, wenn Sie diese Methode aufrufen.
Wenn Sie auf ein a Tag klicken, springt das a Tag.

Außerdem ist es sehr einfach zu verwenden, da es weder einen Rückgabewert noch Parameter hat.

event.stopPropagation();

Bitte sehen Sie sich das folgende Beispiel an, das eine leichte Abwandlung des obigen Beispiels zum Ereignisblasenbild darstellt.

    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <Skript>
        const box1 = document.getElementById('box1')
        const box2 = document.getElementById('box2')
        const box3 = document.getElementById('box3')
        box1.onclick = sayBox1;
        box2.onclick = sageBox2;
        box3.onclick = sageBox3;
        Funktion sayBox3() {
            console.log('Sie haben auf das innerste Kästchen geklickt');
        }
        Funktion sayBox2(e) {
            console.log('Sie haben auf das mittlere Feld geklickt');
            e.stopPropagation(); //Ereigniserfassung und Bubbling deaktivieren}
        Funktion sayBox1() {
            console.log('Sie haben auf das äußerste Kästchen geklickt');
        }
    </Skript>

Wenn das Ereignis zu box2 sprudelt, wird die Funktion sayBox2 aufgerufen und e.stopPropagation(); wird aufgerufen, um das Sprudeln zu stoppen.

Dies ist das Ende dieses Artikels über JavaScript-Ereigniserfassungsblasen und Erfassungsdetails. Weitere relevante Inhalte zu JavaScript-Ereigniserfassungsblasen und Erfassung finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

IV. Referenzen

Chinesische MDN-Version https://developer.mozilla.org/zh-CN/
Zhihu https://zhuanlan.zhihu.com/p/26536815

Das könnte Sie auch interessieren:
  • Erfahren Sie mehr über die am häufigsten verwendeten JavaScript-Ereignisse
  • Analyse des Ereignisschleifenmechanismus von JavaScript
  • Detaillierte Erklärung der JS-Ereignisdelegation
  • Eine kurze Analyse von Event Bubbling und Event Capture in js
  • Fallstudie zu JavaScript-Ereignisschleifen
  • Detaillierte Erläuterung der Javascript-Ereigniserfassungs- und Bubbling-Methoden

<<:  14 Möglichkeiten zum Erstellen von Website-Inhalten, die Ihre Besucher fesseln

>>:  Vergleichstabelle für HTML-Sondersymbole auf Webseiten

Artikel empfehlen

Kostenloses Tool zur Überprüfung der Richtigkeit von HTML-, CSS- und RSS-Feeds

Ein Trick zum Umgang mit dieser Art von Fehlern be...

Zusammenfassung der Unterschiede zwischen MySQL-Primärschlüssel und eindeutigem Schlüssel

Was ist ein Primärschlüssel? Ein Primärschlüssel ...

Verwendung des Linux-Telnet-Befehls

1. Einleitung Der Befehl Telnet dient zur Anmeldu...

Stellen Sie das Vue-Projekt auf einem Linux-Server bereit

Fall 1 vue-cli erstellt das vue3-Projekt, lädt da...

Eine Sammlung möglicher Probleme bei der Migration von SQLite3 nach MySQL

Kurzbeschreibung Passend für Leser: Mobile Entwic...

Detaillierte Erklärung der node.js-Installation und HbuilderX-Konfiguration

Tutorial zur npm-Installation: 1. Laden Sie das N...

So implementieren Sie die Docker-Volume-Montage

Die Erstellung des einfachsten „Hello World“-Ausg...

So legen Sie Hintergrundfarbe und Transparenz in Vue fest

Einstellungen für Hintergrundfarbe und Transparen...

Gutes Website-Copywriting und gute Benutzererfahrung

Das Betrachten einer Website ist eigentlich wie di...

Analyse des Prozesses zur Konfiguration des Alibaba Cloud-Proxy-Warehouses basierend auf Nexus

Das Standard-Remote-Repository von Nexus ist http...

Auszeichnungssprache - Titel

Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...

JS Cross-Domain-XML – mit AS URLLoader

Kürzlich erhielt ich eine Anforderung für eine Fun...

Beispielcode zum Ändern des Textstils der Eingabeaufforderung in HTML

Auf vielen Websites wird im Eingabefeld Hinweiste...

Gemeinsame MySQL-Sicherungsbefehle und Shell-Sicherungsskripte

Um mehrere Datenbanken zu sichern, können Sie den...

Grafisches Tutorial zur Installation der MySQL-Datenbank und Konfiguration von Umgebungsvariablen auf dem Mac

Inhaltsverzeichnis Installieren Sie MySQL Konfigu...