Das Konzept der Ereignisse
Ereignis: Bezieht sich auf bestimmte Interaktionsmomente, die in einem Dokument oder Browserfenster auftreten. Wir können Ereignisse über Hörer (oder Handler) planen, damit der entsprechende Code nach dem Auftritt des Ereignisses ausgeführt wird.
1. Ereignisfluss
1. Ereignisfluss: Beschreibt die Reihenfolge, in der Ereignisse auf der Seite akzeptiert werden
2. Ereignisblasen: Empfangen vom spezifischsten Element und dann Schritt für Schritt nach oben zum Knoten des am wenigsten spezifischen Elements (Dokument)
3. Ereigniserfassung: Der am wenigsten spezifische Knoten empfängt das Ereignis zuerst, während der spezifischste Knoten das Ereignis zuletzt empfangen sollte.
2. Ereignishandling
1.HTML Ereignisverarbeitung: Fügen Sie direkt zur HTML -Struktur hinzu
2. Ereignisverarbeitung von DOM0 -Ebene: Weisen Sie einem Ereignis -Handler -Attribut eine Funktion zu
3.. DOM2 Level Event -Handling:
AddEventListener ("Ereignisname", "Ereignishandlerfunktion", Boolescher Wert)
Richtig: Ereigniserfassung
Falsch: Ereignisblasen
removeEventListener ();
4. IE Event -Handler
Anhang
Ablösung
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> </title> </head> <body> <div id = "div"> <button id = "btn1"> button </button> </div> <! btn1 = document.getElementById ("btn1"); btn1.onclick = function () {alert ("Hallo Dom0 -Ereignis -Handler")}; // überschrieben Btn1.onclick = function () {alert ("Hallo Dom0 Level Ereignis Handler 2")}; 3 ")}; </script>-> <!-<Script> var btn1 = document.getElementById (" btn1 "); Demo1 () {alert ("DOM2-Ereignishandler 1");} Funktion Demo2 () {alert ("DOM2-Ereignis-Handler 2"); document.getElementById("btn1");if(btn1.addEventListener){btn1.addEventListener("click",demo);}else if(btn1.attachEvent){btn1.attachEvent("onclick",demo)}else{btn1.onclick = demo();}function Demo () {alert ("Hallo");} </script> </body> </html>III. Ereignisobjekt
1. Ereignisobjekt: Ein Objekt wird generiert, wenn das DOM -Ereignis ausgelöst wird.
2. Ereignisobjektereignis:
Typ: Holen Sie sich den Ereignisentyp
Ziel: Holen Sie sich das Ereignisziel
StopPropagation (): Ereignisse von Blasen verhindern
PREIVORDEFAULT (): Blocker -Ereignis -Standardverhalten blockieren
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <titels> </title> </head> <body> <div id = "div"> <button id = "btn1"> button </button> <a href = "http://ww.baid.com" id = "aid"> baidu </a> </div> <script> document.getElementById ("Btn1"). AddEventListener ("Click", ShowType); Dokument.GetElementById ("Div"). AddEventListener ("Click", ShowDiv); shoughtType (event) {// alert (Event.Type); alert (Ereignis.Target); Ereignis.StopPropagation (); // Stop -Ereignisblasen} function showDiv () {alert ("div")} function showa (Ereignis) {// Ereignis.Stoppropagation (); // Event.preventDefaug ();