Eine kurze Analyse von Event Bubbling und Event Capture in js

Eine kurze Analyse von Event Bubbling und Event Capture in js

01-Ereignisse brodeln

1.1- Einführung in das Event-Bubbling

Wissenspunkte in diesem Abschnitt: Einführung in Event Bubbling

  • Event-Bubbling: Wenn ein Ereignis eines Elements ausgelöst wird, werden nacheinander auch die gleichnamigen Ereignisse aller seiner übergeordneten Elemente ausgelöst.

Element->übergeordnetes Element->Textkörper->HTML->Dokument->Fenster

Das Aufsteigen von Ereignissen hat es schon immer gegeben, aber wir haben das gleiche Ereignis noch nie dem übergeordneten Element hinzugefügt.

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Ereignisse brodeln</title>
    <Stil>
        .übergeordnet {
            Position: relativ;

            Breite: 200px;
            Höhe: 200px;
            Hintergrundfarbe: rosa;
        }

        .Sohn {
            Position: absolut;

            links: 400px;
            oben: 300px;

            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: rot;
        }
    </Stil>
</Kopf>

<Text>
    <!-- Blase: Blase -->

    <div Klasse="übergeordnet">
        <div Klasse="Sohn"></div>
    </div>

    <Skript>
        // Beweisen Sie das Sprudeln: Fügen Sie einfach den gleichen Ereignistyp zum übergeordneten und untergeordneten Element hinzu const parent = document.querySelector('.parent')
        const son = parent.erstesElementChild

        // Klickereignisse an übergeordnetes und untergeordnetes Element binden parent.onclick = function () {
            console.log('übergeordnet')
        }

        //Klick auf das übergeordnete Element: Ausgabe des übergeordneten Elements, Klick auf das untergeordnete Element: Ausgabe ebenfalls des übergeordneten Elements
        // 1. Alle Elemente haben Ereignisse: ob ihnen Ereignisse gegeben werden oder nicht, sie haben alle Ereignisse // 2. Klicken auf das untergeordnete Element löst das Klickereignis des übergeordneten Elements aus: Das Ereignis sprudelt // Alle Elemente haben Ereignisse, einschließlich des Objektfensters der obersten Ebene
        fenster.onclick = Funktion () {
            console.log('Fenster')
        }

        // Ereigniskette: Zielelement -> übergeordnetes Element -> Hauptteil -> HTML -> Dokument -> Fenster
        // Event-Bubbling: meistens nutzlos (und schlecht)
    </Skript>
</body>

</html>

1.2-Event-Bubbling-Nutzung (Event-Delegation)

Wissenspunkte in diesem Abschnitt: Einführung in die Vorteile des Event Bubbling

Vorteile des Event-Bubbling: Wenn wir Ereignisse zu mehreren untergeordneten Elementen eines übergeordneten Elements hinzufügen möchten, müssen wir nur Ereignisse zum übergeordneten Element hinzufügen und dann

Indem Sie die Ereignisquelle (z. B. Ziel) abrufen, können Sie feststellen, welches untergeordnete Element das Ereignis ausgelöst hat.

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Event Bubbling – Anwendung – Event-Delegation</title>
    <Stil>
        li {
            Rand: 20px 0;
        }
    </Stil>
</Kopf>

<Text>
    <ul>
        <li>Baili Shouyue 1</li>
        <li>Baili Shouyue 2</li>
        <li>Baili Shouyue 3</li>
    </ul>

    <Skript>
        // Voraussetzung: Füge allen li-Elementen Maus-In und -Out-Ereignisse hinzu: ändere einfach die Farbe// document.querySelectorAll('li').forEach(function (li) {
        // li.onmouseover = Funktion () {
        // diese.Stil.Hintergrundfarbe = "rot"
        // }

        // li.onmouseout = Funktion () {
        // diese.Stil.Hintergrundfarbe = ''
        // }
        // })

        // 1. Die Effizienz der Codeausführung ist gering: Alle li müssen einzeln an Ereignisse gebunden werden. // 2. Schwache Skalierbarkeit: Das Hinzufügen eines neuen li ist ungültig. // innerHTML: alle sind ungültig. // document.querySelector('ul').innerHTML += '<li>li von innerHTML</li>'
        // Logik: Alles li (Struktur, ohne Ereignisse) aus ul entfernen und wieder einfügen (String-Form): Alle Ereignisse gehen verloren // document.createElement() + appendChild(): Neue Ereignisse sind ungültig // let li = document.createElement('li')
        // li.innerHTML = 'li erstellt von creatElement'
        // document.querySelector('ul').appendChild(li)

        // Ereignisdelegierung: Binden Sie das gebundene Ereignis (Effektcode) des untergeordneten Elements an das übergeordnete Element document.querySelector('ul').onmouseover = function (e) {
            // Im Ereignisobjekt: e.target ist das ursprüngliche Ziel, das das Ereignis ausgelöst hat (das oberste untergeordnete Element)
            Konsole.log(e.Ziel)

            // Wie kann man unterscheiden, ob das Zielelement li oder ul ist? Knoten: Drei Elemente eines Knotens // Knotentyp: li und ul sind beide Elemente, 1
            // nodeValue: li und element sind beide Elemente, null
            // nodeName: ist der Name des Element-Tags in Großbuchstaben: LI UL
            Konsole.log(e.Ziel.Knotenname)
            wenn (e.target.nodeName === 'LI') {
                // ist das Zielelement e.target.style.backgroundColor = "red"
            }
        }

        document.querySelector('ul').onmouseout = Funktion (e) {
            wenn (e.target.nodeName === 'LI') {
                // ist das Zielelement e.target.style.backgroundColor = ''
            }
        }

        // Größter Vorteil: Einmaliges Binden des Ereignisses (deutlich verbesserte Leistung)
        // Sekundärer Vorteil: Unabhängig davon, ob innerHTMl durch createElement geändert oder erstellt wird: alle li sind gültig // document.querySelector('ul').innerHTML += '<li>innerHTML的li</li>'
        // Genau wegen der Ereignisdelegierung: Es besteht keine Notwendigkeit, in Zukunft Elemente zu erstellen. Es ist viel bequemer, innerHTML direkt zu verwenden. // let li = document.createElement('li')
        // li.innerHTML = 'li erstellt von creatElement'
        // document.querySelector('ul').appendChild(li)

        // Event-Delegierung: ist der einzige Wert des Event-Bubblings (sehr nützlich)
    </Skript>
</body>

</html>

1.3-Einfluss von Event-Bubbling und Verhinderung von Event-Bubbling

  • Wissenspunkte in diesem Abschnitt: Einführung in die Auswirkungen von Event Bubbling

Das Aufsteigen von Ereignissen kann zu Anforderungskonflikten führen: Wenn ich beispielsweise eine Funktion hinzufügen möchte, klicke ich nach dem Auftauchen des Anmeldefensters auf den leeren Bereich des Textkörpers, damit das Anmeldefenster verschwindet. Zu diesem Zeitpunkt löst das Klickereignis des Popup-Anmeldefensters des Tags a das Klickereignis des Textkörpers aus, wodurch das Anmeldefenster verschwindet, sobald es erscheint.

Lösung: Event-Bubbling verhindern (Wissenspunkt im nächsten Abschnitt)

  • Wissenspunkt dieses Abschnitts: Verhindern Sie das Aufsteigen von Ereignissen

Prevent event bubbling: verhindert das Aufsteigen (Auslösen) von Ereignissen mit gleichem Namen in übergeordneten Elementen

 * Einfach ausgedrückt: Wenn Sie auf ein Element klicken, wird nur das Ereignis des aktuellen Elements ausgelöst, nicht das Ereignis des übergeordneten Elements mit demselben Namen.

Syntax: event object.stopPropagation() Wird von IE8 und früheren Versionen nicht unterstützt

Ereignisobjekt.cancelBubble = true Unterstützt vor IE8

Hinweis: Wenn Sie das Aufsteigen von Ereignissen verhindern möchten, achten Sie darauf, das Ereignisobjekt in der Funktion zu empfangen, die das Ereignis auslöst.

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Event Bubbling – Auswirkungen – Event Bubbling verhindern</title>
    <Stil>
        * {
            Rand: 0;
            Polsterung: 0;
        }

        A {
            Textdekoration: keine;
            Anzeige: Block;

            Breite: 200px;
            Rand: 20px automatisch;
        }

        .bilden {
            Position: relativ;

            Breite: 400px;
            Höhe: 200px;
            Rand: 0 automatisch;
            Textausrichtung: zentriert;
            Rand: 1px durchgezogen #ccc;

            Anzeige: keine;
        }

        .form span {
            Anzeige: Block;
            Position: absolut;
            rechts: -25px;
            oben: -25px;

            Breite: 50px;
            Höhe: 50px;
            Textausrichtung: zentriert;
            Zeilenhöhe: 50px;
            Rand: 1px durchgezogen #ccc;
            Randradius: 50 %;
            Hintergrundfarbe: #fff;
            Cursor: Zeiger;

        }
    </Stil>
</Kopf>

<Text>
    <a href="javascript:;" rel="external nofollow" >Klicken Sie hier, um das Anmeldefeld anzuzeigen</a>

    <div Klasse="Formular">
        <span>X</span>
        Benutzername: <input type="text" name="username"><br>
        Passwort: <input type="password" name="password"><br>
        <button>Anmelden</button>
    </div>

    <Skript>
        // Ereignisaufsteigen: Das Ereignis des untergeordneten Elements wird ausgelöst, wodurch dasselbe Ereignis des übergeordneten Elements ausgelöst wird. // Voraussetzung: Klicken Sie auf den Link, um das Anmeldefeld anzuzeigen, und klicken Sie auf eine beliebige leere Stelle, um das Anmeldefeld auszublenden. const a = document.querySelector('a')
        const form = document.querySelector('.form')
        const x = form.firstElementChild

        // Stop bubbling: Stoppen Sie die Weiterleitung des Ereignisses: Ereignisobjekt e.stopPropagation()
        // Wenn das Kindelement nicht möchte, dass das Elternelement das gleiche Ereignis auslöst wie das Kindelement: Im Ereignis des Kindelements die Übertragung verhindern // 1. Ein Klickereignis ausgeben: div.form anzeigen
        a.onclick = Funktion (e) {
            Konsole.log('a')
            form.style.display = "Block"

            console.log(e)
            // Übertragung verhindern: Klickereignis, Ende bei e.stopPropagation()
        }

        // 2. Klicken Sie auf ein leeres Feld, um div.form auszublenden: Einfach: Geben Sie dem Dokument || Fenster ein Klickereignis document.onclick = function () {
            console.log('Dokument')
            form.style.display = ''
        }

        // 3. Aus Sicherheitsgründen: Machen Sie das gesamte Formdiv anklickbar und übergeben Sie nicht form.onclick = function (e) {
            e.stopPropagation()
        }

        // 4. Zum Schließen klicken x.onclick = function () {
            form.style.display = ''
        }

        // Zusammenfassung // In der tatsächlichen Entwicklung: Im übergeordneten Element und im untergeordneten Element können Ereignisse desselben Typs auftreten. Wenn die Auswirkungen entgegengesetzt sind (a möchte div anzeigen, das Dokument möchte div verbergen), wird es im Allgemeinen verwendet, um die Ereignisübertragung zu verhindern: e.stopPropagation ()
    </Skript>
</body>

</html>

02-Ereigniserfassung

1.1- Einführung in die Ereigniserfassung

Wissenspunkt dieses Abschnitts: Ereigniserfassung

  • 1. Ereignis-Bubbling: Suchen Sie vom Element, das das Ereignis auslöst, Ebene für Ebene nach dem übergeordneten Element, das das Ereignis mit demselben Namen auslöst, und lösen Sie es aus, wenn es eines gibt
  • 2. Ereigniserfassung: Suchen Sie vom obersten übergeordneten Element aus jeweils eine Ebene nach unten, um die gleichnamigen untergeordneten Elemente zu finden, die das Ereignis auslösen, bis das Element gefunden ist, das das Ereignis auslöst.

Ereigniserfassung und Ereignis-Bubbling lösen Ereignisse in genau umgekehrter Reihenfolge aus

  • 3. Die Ereigniserfassung kann nur über addEventListener erfolgen und der Parameter wird als true geschrieben

Andere sprudeln (nicht über addEventListener hinzugefügt, der Parameter addEventListener ist falsch)

  • 4. Das Ereignis object.stopPropagation () kann nicht nur das Sprudeln stoppen, sondern auch die Erfassung stoppen
  • 5. IE8 und früher werden nicht erfasst!

1.2-Drei Phasen der Veranstaltung

Wissenspunkte in diesem Abschnitt: Einführung in die drei Phasen der Ereignisse

  • 1. Ein Ereignis besteht aus drei Phasen: der Reihenfolge, in der das Ereignis ausgeführt wird

1 – Eroberungsphase:
2 – Zielphase:
3 – Sprudelphase:

  • 2. Event object.eventPhase kann die Phase abrufen, in der dieses Ereignis ausgelöst wird
  • 3. Fangen Sie zuerst von der obersten Ebene nach unten, fangen Sie dann das Ziel, lassen Sie das Ziel sprudeln und sprudeln Sie dann Ebene für Ebene nach oben.
<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Ereigniserfassung</title>
</Kopf>

<Text>
    <div class="box">Ich bin Xiao Ma Ge</div>

    <Skript>
        // bei Ereignis: alle Ereignisse sind sprudelnde Ereignisse window.onclick = function () {
            console.log('Fenster-Blasenereignis')
        }

        dokument.onclick = Funktion () {
            console.log('Bubbling-Ereignis des Dokuments')
        }

        const box = document.querySelector('.box')

        box.onclick = Funktion () {
            console.log('Blasenereignis der Box')
        }

        // Ereignisse erfassen: Es gibt nur einen Weg addEventListener('Ereignistyp', Callback-Funktion, true)
        window.addEventListener('klicken', Funktion () {
            // console.log('Fenstererfassungsereignis')
        }, WAHR)

        document.addEventListener('klicken', Funktion () {
            console.log('Dokumenterfassungsereignis')
        }, WAHR)

        // Einziger Wert der Ereigniserfassung: Vorbereitung auf das Ereignisziel // Ereignisablauf: Erst Erfassung, dann Ziel, dann Bubble // Zielphase: unterscheidet nicht zwischen Erfassung und Bubble (welcher Code steht vorne, welcher wird zuerst ausgeführt)
        // Neuestes von Google: Erst erfassen, dann sprudeln // IE ist an der Reihe (Zielphase)

        // Vor der Box befindet sich bereits eine Klickblase box.addEventListener('click', function () {
            console.log('Box-Erfassungsereignis')
        }, WAHR)

        // e.stopPropagation() organisiert die Ereignisübermittlung: Wenn es in der Erfassungsphase blockiert wird, verursacht es einen JS-Fehler
        window.addEventListener('klicken', Funktion (e) {
            e.stopPropagation()
        }, WAHR)

    </Skript>
</body>

</html>```

Dies ist das Ende dieses Artikels über die kurze Analyse von Event Bubbling und Event Capture in js. Weitere relevante Inhalte zu Event Bubbling und Event Capture in js 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:
  • Erfahren Sie mehr über die am häufigsten verwendeten JavaScript-Ereignisse
  • Analyse des Ereignisschleifenmechanismus von JavaScript
  • JavaScript-Ereigniserfassungs-Blubbern und Erfassungsdetails
  • Detaillierte Erklärung der JS-Ereignisdelegation
  • Fallstudie zu JavaScript-Ereignisschleifen
  • Detaillierte Erläuterung der Javascript-Ereigniserfassungs- und Bubbling-Methoden

<<:  MySQL verwendet ein Limit, um die Beispielmethode für Paging zu implementieren

>>:  So lösen Sie das Problem, dass das Projekt in Eclipse nicht zu Tomcat hinzugefügt werden kann

Artikel empfehlen

Lösen Sie das Problem des unzureichenden Docker-Festplattenspeichers

Nachdem der Server, auf dem sich Docker befindet,...

MySQL-Abfragebaumstrukturmethode

Inhaltsverzeichnis MySQL-Abfragebaumstruktur 1. Ü...

Ein praktischer Bericht über die Prüfung und Bearbeitung doppelter MySQL-Datensätze vor Ort

Inhaltsverzeichnis Vorwort analysieren Daten insg...

Reiner CSS-Header, korrigierter Implementierungscode

Es gibt zwei Hauptgründe, warum es schwierig ist,...

Beispielcode für die automatische Aktualisierung von Webseiten und den automatischen Sprung

Automatische Aktualisierung der Webseite: Fügen Si...

Beispielcode zur Konvertierung von http in https mit nginx

Ich schreibe gerade ein kleines Programm. Da die ...

Docker verwendet Dockerfile, um die Node.js-Anwendung zu starten

Schreiben einer Docker-Datei Am Beispiel des von ...

Lösung für den Fehler von MySQL, innobackupex zum Sichern des Verbindungsservers zu verwenden

Was soll ich tun, wenn MySQL keine Verbindung zum...

CSS-Pickup-Pfeile, Kataloge, Icons Implementierungscode

1. Verschiedene CSS-Symbole Es gibt drei Möglichk...

Vue implementiert eine kleine Notizblockfunktion

In diesem Artikelbeispiel wird der spezifische Co...

Vollständige MySQL-Sicherung und schnelle Wiederherstellungsmethoden

Ein einfaches MySQL-Vollsicherungsskript, das die...

Detailliertes Beispiel für das Linux-Allround-Systemüberwachungstool dstat

Umfassendes Systemüberwachungstool dstat dstat is...

Detaillierte Erklärung zur Verwendung des Alias-Befehls unter Linux

1. Verwendung von Pseudonymen Mit dem Alias-Befeh...

Eine kurze Beschreibung der Beziehung zwischen k8s und Docker

In letzter Zeit verwendet das Projekt Kubernetes ...

Detailliertes Tutorial zur Installation von phpMyAdmin unter Ubuntu 18.04

Wir werden phpMyAdmin installieren, damit es mit ...