Wenn Sie über JavaScript -Ereignisse sprechen, ist es schwierig, drei Themen zu vermeiden: Ereignisblasen, Ereigniserfassung und Blockieren von Standard -Ereignissen, unabhängig davon, ob es sich um ein Interview oder in der täglichen Arbeit handelt.
1. Ereignisblasen
Schauen wir uns einen Code an:
var $ input = document.getElementsByTagName ("Eingabe") [0]; var $ div = document.getElementsByTagName ("div") [0]; var $ body = document.getElementsByTagName ("Body") [0]; Fenster.E; alert ("rot")} $ div.onclick = function (e) {this.style.border = "5px Solid Green" alert ("grün")} $ body.onclick = function (e) {this.style.border = "5px Solid Yellow" alert ("gelb")}}}}}}}}}}}}}}}HTML -Code
<Div> <Eingabe type = "button" value = "testenereignisblasen" /> < /div> "rot", "grün", "Gelb" taucht nacheinander auf.
Ihre ursprüngliche Absicht ist es, das Tastenelement auszulösen, wird jedoch zusammen mit dem an das übergeordneten Element gebundenen Ereignis ausgelöst. Dies ist die Ereignisblase.
Wenn die Ereignisbindung an die Eingabe geändert wird in:
$ input.onclick = Funktion (e) {this.style.border = "5px Solid Red" var e = e || Fenster.E; alert ("rot") e.stoppropagation ();}Zu diesem Zeitpunkt wird nur "rot" auftauchen, weil es verhindert, dass das Ereignis sprudelt.
2. Ereigniserfassung
Da es ein Ereignis sprudelt, kann es eine Erfassungsveranstaltung von Ereignissen geben, was ein umgekehrter Prozess ist. Der Unterschied ist vom oberen Element zum Zielelement oder vom Zielelement zum oberen Element.
Lassen Sie uns ein Stück Code sehen:
$input.addEventListener("click", function(){ this.style.border = "5px solid red"; alert("red")}, true)$div.addEventListener("click", function(){ this.style.border = "5px solid green"; alert("green")}, true)$body.addEventListener("click", function(){ this.style.border = "5px solide gelb";Zu dieser Zeit taucht "gelb", "grün", "rot" einzeln auf, was die Erfassung des Ereignisses ist.
3. Blockieren Sie das Standard -Ereignis
Es gibt einige Standardverhalten von HTML -Elementen, wie z. B. das A -Tag, und es wird nach dem Klicken eine Sprungaktion geben. Die Eingabe von Sendentypen im Formularformular verfügt über ein standardmäßiges Einreichungs -Jump -Ereignis. Die Eingabe des Reset -Typs hat ein Reset -Form -Verhalten. Wenn Sie dieses Browser -Standardverhalten blockieren möchten, bietet Ihnen JavaScript eine Methode.
var $ a = document.getElementsByTagName ("a") [0]; // false; // Es ist auch möglich} <a href = "http://keleyi.com"> ke Leyi </a> Das Standard -Ereignis ist weg.Gibt es Unterschiede, da die Rückgabe von False und E.PreventDefault () den gleichen Effekt haben? Natürlich gibt es.
Das Standardverhalten von Veranstaltungshosts kann nur in HTML-Ereignisattributen und Ereignisverarbeitungsmethoden auf DOM0-Ebene organisiert werden.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.