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

• Was sind Ereignisse: Ereignisse beziehen sich auf alle Ereignisse, die in js auftreten können und überwacht werden, wie zum Beispiel: (Maus, Tastatur, Browserfensteränderungen usw.)

• Was ist ein Ereignisobjekt (Ereignis): Für den Laien ist es ein Objekt, das verschiedene Informationen über das Ereignis aufzeichnet.
  Hierbei ist zu beachten, dass das Ereignisobjekt Kompatibilitätsprobleme aufweist. In anderen Browsern als IE ist es ein Ereignis, in Nicht-Browsern jedoch window.event.

 btn.onclick = function(event){let e = event ||.

Vereinfacht 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.srcElement
• Im IE ist es event.target
  Die kompatible Schreibmethode bezieht sich auf das Ereignisobjekt

Ereignisstrom

Ereignisströme werden hauptsächlich in zwei Kategorien unterteilt: 1. Erfassungsereignisse 2. Blasenereignisse Die Reihenfolge der Auslösung besteht darin, zuerst zu erfassen und dann zu blasen. Bei einer Unterteilung wird es jedoch eine Zielphase geben, nachdem die Blasenphase erfasst wurde ist das DOM-Element, das speziell ausgeführt 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 Dokument>htm>body>p weitergegeben. Die Übertragung erfolgt von außen nach innen.

sprudelnde Ereignisse

Im Gegensatz zum Capture-Ereignis wird es von innen nach außen weitergegeben. Wenn der Benutzer auf p klickt, wird es an das übergeordnete Ereignis p>body>html übergeben. ***Da diese Funktion häufig für die Delegation von Ereignissen verwendet wird.

Veranstaltungsdelegation

Wir binden dieselben Ereignisse, die von allen untergeordneten Elementen ausgelöst werden sollen, an das übergeordnete Element, wodurch DOM-Operationen reduziert und die Leistung verbessert werden können. Die spezifische Verwendungsmethode besteht darin, die Ereignisquellenobjektmethode zu verwenden.

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

Um Klickereignisse an li zu binden, besteht unser Ansatz normalerweise darin, die Klickereignisse in einer Schleife an li zu durchlaufen

 let oLi = document.querySelectorAll("li")
 for(let i; i < oLi.length; i++){
            oLi[i].onclick = function(){
                console.log("i")
            }
        }

Die Art und Weise, die Ereignisdelegation zu nutzen, ist

 let oUl = document.querySelector("ul")
  oUl.onclick = Funktion(Ereignis){
            sei e = Ereignis ||
            console.log(e.target.innerHTML)
        }

• Vorteil
• Verbessern Sie die Leistung, da nicht alle Elemente durchlaufen werden müssen, um Ereignisse einzeln zu binden.
• Flexible, neue Elemente können dynamisch erstellt werden, ohne Ereignisse erneut zu binden.

Vorgang zur Verhinderung von Ereignisblasen (Kompatibilitätsschreiben)

***Einige Ereignisse erfordern keine Sprudelvorgänge

 Funktion stopBubble(event){
    var e = event||window.event //Ereignisobjektkompatible Schreibmethode e.stopProgation() ? e.stopProgation() : e.cancelBubble = true //IE-kompatible Schreibmethode}

Standardereignisse blockieren (kompatible Schreibmethode)

***Blockieren Sie ein Tag und standardmäßige Sprung- und Menüereignisse mit der rechten Maustaste

 Funktion cancelHandle(event){
    var e = event||window.event
    e.preventDefault() ? e.preventDefault() : e.returnValue = false/*ie*/}

Verwandte Empfehlungen: [JavaScript-Video-Tutorial]

Das Obige ist eine detaillierte Erklärung des Ereignisobjekts, des Ereignisquellenobjekts und des Ereignisstroms in js. Weitere Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!