Heim > Web-Frontend > js-Tutorial > Hauptteil

Eine detaillierte Erklärung von Ereignisobjekten, Ereignisquellobjekten und Ereignisströmen in js

藏色散人
Freigeben: 2022-08-07 09:51:13
nach vorne
2300 Leute haben es durchsucht

Ereignisobjekt, Ereignisquellenobjekt, Analyse und Verständnis des Ereignisflusses in js

Ereignisobjekt (Ereignis)

  • Was ist ein Ereignis: Ereignis bezieht sich auf alle Ereignisse, die in js auftreten können und überwacht werden, z as (Maus-, Tastatur- und Browserfensteränderungen usw.)

  • Was ist ein Ereignisobjekt (Ereignis): Laienhaft ausgedrückt handelt es sich um ein Objekt, das verschiedene Informationen über das Ereignis aufzeichnet.
    Hier ist zu beachten, dass das Ereignisobjekt in anderen Browsern als IE ein Ereignis ist, in Nicht-Browsern jedoch eine window.event-Quelle Objekt

Einfach ausgedrückt bezieht es sich auf das spezifische Objekt, auf dem das Ereignis aufgetreten ist. Bei Elementelementen bezieht sich das Ereignisquellenobjekt auf das Element, auf das Sie geklickt haben. Es gibt auch Probleme mit der Browserkompatibilität:

In Firefox ist es event.srcElementIm IE ist es event.target

Kompatible Schreibmethoden finden Sie im Ereignisobjekt

  • Ereignisfluss

Ereignisfluss ist hauptsächlich in zwei Kategorien unterteilt: 1. Erfassungsereignis 2. Die Auslösesequenz für das Blasenereignis besteht darin, zuerst zu erfassen und dann zu blasen

Aber wenn es unterteilt ist, gibt es nach der Erfassung des Blasenstadiums eine Zielphase, d. h. die Betriebsphase für das spezifische DOM-Element, das bedient werden soll Ereignisse erfassen

Der oberste Knoten empfängt zuerst das Ereignis und gibt es dann nach unten an den spezifischen Knoten weiter. Beispiel: Wenn der Benutzer auf das p-Element klickt und die Ereigniserfassung verwendet, wird das Klickereignis in der Reihenfolge von document>htm>body>p weitergegeben. Die Übertragung erfolgt von außen nach innen.

Bubble-Ereignisse

sind das Gegenteil von Capture-Ereignissen. Sie werden von innen nach außen weitergegeben. Wenn der Benutzer auf p klickt, wird es an das übergeordnete Element p>body>html weitergeleitet. ***Da diese Funktion häufig für die Delegation von Ereignissen verwendet wird.

Ereignisdelegation

Wir binden dieselben Ereignisse, die alle untergeordneten Elemente auslösen müssen, an das übergeordnete Element, wodurch DOM-Vorgänge reduziert und die Leistung verbessert werden können. Die spezifische Verwendungsmethode besteht darin, die Ereignisquellenobjektmethode zu verwenden.

btn.onclick = function(event){let e = event || window.event}
Nach dem Login kopieren
Um Klickereignisse an li zu binden, besteht unser Ansatz normalerweise darin, Klickereignisse in einer Schleife an li zu durchlaufen um sie an ein bestimmtes Ereignis zu binden.

Flexibel, neue Elemente können dynamisch erstellt werden, ohne Ereignisse erneut zu binden.

Verhindern Sie das Sprudeln von Ereignissen und blockieren Sie Standardereignisse.

  • Vorgang zum Verhindern des Sprudelns von Ereignissen (Kompatibilitätsschreiben). )
  • ***Blockieren Sie das a-Tag und die Standard-Sprung- und Menüereignisse der rechten Maustaste
  • <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    Nach dem Login kopieren
  • Verwandte Empfehlungen: [
JavaScript-Video-Tutorial

]

Das obige ist der detaillierte Inhalt vonEine detaillierte Erklärung von Ereignisobjekten, Ereignisquellobjekten und Ereignisströmen in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage