1. Ereignisfluss
Die Reihenfolge, in der das HTML -Element Ereignisse auslöst.
2. Event Bubble IEs Event -Stream wird als Ereignisblase bezeichnet, was bedeutet, dass das Ereignis nach dem spezifischsten Element (der Knoten mit der tiefsten Verschachtelungsstufe im Dokument) beginnt und dann Schritt für Schritt nach oben zum weniger spezifischen Knoten (Dokument) ausbreitet. 3. Ereigniserfassung Die Idee der Ereigniserfassung ist, dass weniger spezifische Knoten früher Ereignisse empfangen sollten, während die spezifischsten Knoten am Ende Knoten empfangen sollten. Der Zweck der Ereigniserfassung besteht darin, das Ereignis zu erfassen, bevor es das vorgegebene Ziel erreicht.
DOM Event Stream
Der im "DOM2 Level Event Flow" angegebene Ereignisfluss enthält drei Stufen: die Ereigniserfassungsphase, die Zielstufe und die Blasenstufe. Das erste, was passiert, ist Event Capture, die die Möglichkeit bietet, Ereignisse abzufangen. Dann erhält das tatsächliche Ziel das Ereignis. Die letzte Stufe ist die Blasenphase, auf die Ereignisse reagiert werden können. Wenn Sie als Beispiel eine einfache HTML -Seite aufnehmen, wird das Klicken auf das <Div> -Element in der unten angegebenen Reihenfolge ausgelöst.
Im DOM -Ereignisstrom empfängt das tatsächliche Ziel (<Div> Element) während der Erfassungsphase keine Ereignisse. Dies bedeutet, dass während der Erfassungsphase das Ereignis nach dem Dokument zu <html> und dann zu <body> stoppt. Die nächste Stufe ist die "gezielte" Stufe, daher erfolgt das Ereignis auf <div> und wird als Teil der Blasenphase in der Ereignisverarbeitung angesehen. Dann tritt die Blasenphase auf und das Ereignis verbreitet sich zurück zum Dokument.
Die meisten Browser, die DOM Event Streaming unterstützen, implementieren ein bestimmtes Verhalten. Obwohl die Spezifikation "DOM2 Level Event" eindeutig erfordert, dass die Erfassungsstufe nicht das Ziel des Ereignisses beinhaltet. Infolgedessen gibt es zwei Möglichkeiten, Ereignisse auf dem Zielobjekt zu betreiben.
Stoppen Sie Ereignisse von Blasen
Experiment
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <title> </title> <script type = "text/javascript"> Funktion onBtn () {alert ('button'); // civileBubble (); Ereignisblasen verhindern. // Funktion Caller while (func! = null) {var arg0 = func.arguments [0]; //Get the first parameter of the caller//Judge whether the parameter is empty if(arg0){//Judge whether arg0 is an event object if((arg0.constructor == Event || arg0.constructor == MouseEvent || arg0.constructor == KeyboardEvent) ||(typeof(arg0) == "object" && arg0.preventDefault && arg0.stoppropagation)) {return arg0; }} // Func Caller func = func.caller;} return null;} // Blockereignisblasen Funktion CROSGRABBLBLE () {Event = getEvent (); // Firefox Chrome if (Event.PreventDefault) {Event.PreventDefault (); Event.StopPropagation (); } else {// dh event.cancelBubble = true; Ereignis.ReturnValue = false; }} </script> </head> <body onclick = "alert ('body')"> <div onclick = "alert ('div');" style = "background-color: green"> <button onclick = "onbtn ()"> dsd </button> </div> </body> </html>Der obige HTML -Code wird in der Reihenfolge des Ereignisauslösen ausgeführt.
Standard: 'Button' wird auftauchen ---》 wird 'Div' auftauchen ----》 wird 'Körper' auftauchen.
Wenn Sie CancelBubble () Code hinzufügen: Nur 'Taste' wird angezeigt
Der obige Artikel hat ein tiefes Verständnis des JS -Dom -Ereignismechanismus. Es ist alles der Inhalt, den ich mit Ihnen geteilt habe. Ich hoffe, es kann Ihnen eine Referenz geben und ich hoffe, Sie können Wulin.com mehr unterstützen.