Einführung in JavaScript-Bubbling und -Capturing (mit Code)

Der Inhalt dieses Artikels ist eine Einführung in das Wissen über das Sprudeln und Erfassen von JavaScript (mit Code). Ich hoffe, dass er für Sie hilfreich ist.

Was ist JS-Bubbling und -Capturing?

Bubbler und Capturing beziehen sich auf die beiden Richtungen oder Prozesse, in denen js Ereignisse liefert, wenn ein Ereignis für ein Element ausgelöst wird.

Vorwort:

Zum Beispiel gibt es eine solche Seite und eine JS-Methode

Weniger: Ich verwende less zum Schreiben Ja, wenn es keine less-Umgebung gibt, können Sie diesen Absatz ignorieren.

.level {
  padding: 50px 80px;
}

.level-template(@level: 1, @color: #fff){
  background-color: darken( @color , 5% * @level);
}

#lv1{ .level-template(1)}
#lv2{ .level-template(2)}
#lv3{ .level-template(3)}
#lv4{ .level-template(4)}

HTML

<div>
    <div>
        <div>
            <div>

            </div>
        </div>
    </div>
</div>

JS

function $(id) {
    return document.getElementById(id);
}

window.onload = () => {
    $('lv1').addEventListener("click",()=>{console.log('lv1')},true);
    $('lv2').addEventListener("click",()=>{console.log('lv2')},true);
    $('lv3').addEventListener("click",()=>{console.log('lv3')},true);
};
// 上面的 () => {} 为 ES6 的匿名方法的定义方式
// 等同于
function () {
    console.log('lv1')
}

Was das obige js tut:
Wenn die Seite geladen wird, fügen Sie den drei Divs selbst Klicküberwachungsmethoden hinzu, wenn Sie darauf klicken , wird ein eigener ID-Wert in der Konsole ausgegeben.

Die Struktur der Seite ist wie folgt: lv1 enthält lv2 und lv2 enthält lv3. Wenn Sie auf lv3 klicken, klicken Sie tatsächlich auf lv2 und lv1, da sich lv3 in lv2 befindet. Sie werden natürlich auf lv2 und lv1 klicken, das heißt, wenn auf lv3 geklickt wird, werden drei Klickereignisse ausgelöst.
Die Reihenfolge, in der diese drei Ereignisse ausgelöst werden, ist das sogenannte Sprudeln und Einfangen.

Drei Phasen, die die Ereignisauslösung durchläuft:

1. Erfassungsphase: Beginnen Sie zunächst vom Wurzelknoten des Dokuments document bis zum ereignisauslösenden Objekt , und erfassen Sie das Ereignisobjekt von außen nach innen
2. Suchen Sie das Ziel: Suchen Sie den Zielort des Ereignisses (wo sich der Vorfall ereignet hat) und lösen Sie das Ereignis aus; >Blasenphase
: Beginnen Sie dann mit der Zielereignisposition, die bis zum Stammknoten des Dokuments zurückverfolgt wird, und Ereignisobjekte werden von innen nach außen in Blasen umgewandelt.
3. 1. Erfassungsphase

Die Richtung dieses Auslösers ist die Erfassungsrichtung.

2. Sprudelnde Stufe

element.addEventListener(event, function, useCapture)

lv1
lv2
lv3

-Ereignis wird in

 window.onload = () => {
        $('lv1').addEventListener("click",()=>{console.log('lv1')},false);
        $('lv2').addEventListener("click",()=>{console.log('lv2')},false);
        $('lv3').addEventListener("click",()=>{console.log('lv3')},false);
    };

Zusammenfassung

clickSprudelnde und gefangene Beziehungen werden nur in der Struktur der Inklusion und Inklusion auftauchen, und in der Brüderlichkeit wird es eine solche Beziehung nicht geben. 冒泡阶段Sprudeln und Einfangen unterscheiden sich lediglich in der Richtung.

Das obige ist der detaillierte Inhalt vonEinführung in JavaScript-Bubbling und -Capturing (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!