Beispiele für JavaScript-Ereignis-Bubbling, Ereigniserfassung und Blockierung von Standard-Ereigniscodes

Wenn wir über die Ereignisse von JavaScript sprechen, sind die drei Themen Ereignis-Bubbling, Ereigniserfassung und Blockierung von Standardereignissen schwer zu vermeiden, sei es in Interviews oder in der täglichen Arbeit.

Blasen

Schauen wir uns zunächst ein Beispiel an:

js:

var $input = document.getElementsByTagName("input")[0];
        var $p = document.getElementsByTagName("p")[0];
        var $body = document.getElementsByTagName("body")[0];

        $input.onclick = function(e){
            this.style.border = "5px solid red"
            var e = e || window.e;
            alert("red")
        }
        $p.onclick = function(e){
            this.style.border = "5px solid green"
            alert("green")
        }
        $body.onclick = function(e){
            this.style.border = "5px solid yellow"
            alert("yellow")
        }

html:

<p>
        <input type="button" value="测试事件冒泡" />
    </p>

In der Reihenfolge „rot“, „grün“, „gelb“ erscheint.

Ihre ursprüngliche Absicht besteht darin, das Schaltflächenelement auszulösen, aber es wird zusammen mit dem an das übergeordnete Element gebundenen Ereignis ausgelöst. Das ist Event-Sprudeln.

Wenn die Ereignisbindung an die Eingabe geändert wird in:

$input.onclick = function(e){
    this.style.border = "5px solid red"
    var e = e || window.e;
    alert("red")
    e.stopPropagation();
}

Zu diesem Zeitpunkt wird nur „rot“ angezeigt

, da verhindert wird, dass das Ereignis sprudelt.

Erfassung

Da es ein Sprudeln von Ereignissen gibt, kann es auch zu einer Erfassung von Ereignissen kommen. Dies ist ein umgekehrter Prozess. Der Unterschied besteht vom obersten Element zum Zielelement oder vom Zielelement zum obersten Element.

Sehen Sie sich den Code an:

$input.addEventListener("click", function(){
    this.style.border = "5px solid red";
    alert("red")
}, true)
$p.addEventListener("click", function(){
    this.style.border = "5px solid green";
    alert("green")
}, true)
$body.addEventListener("click", function(){
    this.style.border = "5px solid yellow";
    alert("yellow")
}, true)

Zu diesem Zeitpunkt werden nacheinander „Gelb“, „Grün“ und „Rot“ angezeigt.

Dies ist die Aufnahme der Veranstaltung.

Wenn Sie den dritten Parameter der addEventListener-Methode auf „false“ ändern, bedeutet dies, dass er nur während der Bubbling-Phase ausgelöst wird. Die Popups sind in der Reihenfolge „rot“, „grün“, „gelb“. ".

Standardereignisse verhindern

Es gibt einige HTML-Elemente Standardverhalten, wie z. B. das Tag „a“, das nach dem Klicken auf die Eingabe des Typs „Senden“ im Formular eine Sprungaktion auslöst Es gibt ein Standard-Übermittlungssprungereignis; die Eingabe vom Typ „Zurücksetzen“ hat das Verhalten des Formulars „Zurücksetzen“ zur Folge.

Wenn Sie dieses Browser-Standardverhalten verhindern möchten, bietet Ihnen JavaScript die entsprechende Methode.

Beginnen wir mit dem Code

var $a = document.getElementsByTagName("a")[0];
$a.onclick = function(e){
    alert("跳转动作被我阻止了")
    e.preventDefault();
    //return false;//也可以
}

<a href="http://www.nipic.com">昵图网</a>

Das Standardereignis ist weg.

Da return false und e.preventDefault() den gleichen Effekt haben, gibt es Unterschiede zwischen ihnen? Natürlich gibt es das.

Nur ​​in der HTML-Ereignis--Attribut-- und DOM-Level-0--Ereignisbehandlungsmethode kann das Standardverhalten des Ereignishosts durch die Rückgabe von „return false“ organisiert werden.

Hinweis: Das Obige basiert auf dem W3C-Standard und berücksichtigt nicht die unterschiedlichen Implementierungen von IE.

Das obige ist der detaillierte Inhalt vonBeispiele für JavaScript-Ereignis-Bubbling, Ereigniserfassung und Blockierung von Standard-Ereigniscodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!