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

Wenn wie im obigen Beispiel auf lv3 geklickt wird, beginnt js auf der obersten Ebene des Dokuments und sucht nach dem Ursprung des Klickereignisses von außen nach innen. Das ist lv3. Dann ist dieser Prozess von außen nach innen lv1 --> lv2 --> Die Klickereignisse dieser drei p's werden entsprechend diesem Prozess ausgelöst.

Die Richtung dieses Auslösers ist die Erfassungsrichtung.

2. Sprudelnde Stufe

Nach dem Auffinden der angeklickten Stufe wird Stufe 3 --> werden nacheinander ausgelöst. , das Klickereignis von lv1. Dieser Inside-Out-Auslösevorgang wird als Bubbling bezeichnet ist ein boolescher Wert, mit dem festgelegt wird, ob das Ereignis in der Blasenphase oder in der Erfassungsphase ausgelöst wird. Der Standardwert ist „false“, was bedeutet, dass es in der Blasenphase ausgelöst wird.

An diesem Punkt wissen Sie, dass die im obigen Beispiel definierte Klickmethode in der Erfassungsphase ausgeführt wird, dann ist das zurückgegebene Ergebnis

element.addEventListener(event, function, useCapture)

Wenn im oberen Beispiel der Onload-Inhalt ist so

lv1
lv2
lv3

Das heißt, das

-Ereignis wird in

ausgelöst und das zurückgegebene Ergebnis ist

 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!