Detaillierte Erklärung zum Javascript-Event-Bubbling, Event-Capture und Event-Delegation

1. Ereignissprudeln : Wenn im Prozess der Ereignisausbreitung in JavaScript ein Ereignis für ein Element ausgelöst wird, wird das Ereignis schrittweise an die Vorgängerelemente weitergegeben, bis das Dokument erreicht ist. In einigen Browsern kann es sein, dass das Ereignis das Fenster erreicht. Nicht alle Ereignisse weisen ein Aufsteigen auf, z. B.: blur , focus , load

2. Ereignisdelegierung : Die Ereigniserfassung ist das genaue Gegenteil des Ereignis-Bubblings. Sie beginnt beim übergeordneten Element der obersten Ebene und endet mit dem Auslösen des Elements durch ein Ereignis.

Die Ereigniserfassung von js wird im Allgemeinen über das DOM2-Ereignismodell addEventListener implementiert:

target.addEventListener(Typ, Listener, UseCapture)

Der dritte Parameter ist standardmäßig auf „false“ gesetzt, was bedeutet, dass das Ereignis in der Bubbling-Phase ausgelöst wird. Wenn er auf „true“ gesetzt ist, wird es in der Capture-Phase ausgelöst. Generell scheint die Ereigniserfassung in unserer Arbeit selten verwendet zu werden. Aber ich muss immer noch verstehen

<div id="box">
    <div id="Mitte">
        <div id="inner"></div>
    </div>
</div>
<Skript>
//Ereigniserfassung window.onload=function(){
    let box = document.getElementById("box");
    let middle = document.getElementById("mitte");
    let inner = document.getElementById("inner");
    box.addEventListener("klicken",function(){console.log("box")},true);
    middle.addEventListener("klicken",function(){console.log("mitte")},true);
    inner.addEventListener("klicken",function(){console.log("inner")},true);
}
</Skript>
Klicken Sie auf „innen“. Die Konsole gibt Folgendes aus: „box, middle, inner“

Stoppen Sie das Aufsprudeln von Ereignissen

Normalerweise wird eine große Anzahl von Ereignissen verwendet, die das Aufsprudeln von Ereignissen ermöglichen. In einem bestimmten untergeordneten Tag müssen wir jedoch möglicherweise keine Ereignisse an das übergeordnete Element weitergeben. Zu diesem Zeitpunkt müssen wir das Aufsprudeln seiner Ereignisse verhindern.

Im Allgemeinen wird stopPropagation verwendet, um das Aufsteigen von Ereignissen zu verhindern. Im IE wird cancelBuble=true verwendet. stopPropagation ist auch eine Methode des Ereignisobjekts (Event). Seine Funktion besteht darin, das Aufsteigen von Ereignissen des Zielelements zu verhindern, verhindert jedoch nicht das Standardverhalten.

//Ereignisaufsteigen verhindern let btna = document.getElementById('btn');
btna.onclick=Funktion(e){
    Fenster.Ereignis? Fenster.Ereignis.AbbrechenBubble = true : e.stopPropagation();
 };

3. Ereignisdelegierung : Ereignisdelegierung kann auch Ereignisproxy genannt werden. Ereignisdelegierung nutzt Ereignis-Bubbling. Indem Sie nur einen Ereignishandler angeben, können Sie alle Ereignisse eines bestimmten Typs verwalten.

Vorteile: Die Reduzierung von DOM-Operationen kann die Leistung von Webseiten verbessern. Wenn ein übergeordnetes Element und viele untergeordnete Elemente einer Seite dasselbe Ereignis ausführen müssen, können wir nicht an jedes Element ein Ereignis binden.

<ul id="getNum">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<Skript>
let ptclick = document.getElementById('getNum');
let lilist = ptclick.querySelectorAll('li');
für (lass i = 0; i <lilist.length; i++) {
    lilist[i].index = i;
};
ptclick.onclick = Funktion(e){
    var e = e || Fenster.Ereignis;
    var Ziel = e.Ziel || e.QuelleElement;
    Konsole.log(e.target.index);
};
</Skript>

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!