Konsep acara
Acara: Mengacu pada beberapa momen interaksi spesifik yang terjadi di jendela dokumen atau browser. Kami dapat menjadwalkan acara melalui pendengar (atau penangan) sehingga kode yang sesuai akan dieksekusi saat acara terjadi.
1. Aliran acara
1. Aliran Acara: Menjelaskan urutan acara mana yang diterima di halaman
2. Gelembung Acara: Diterima oleh Elemen Paling Spesifik dan kemudian diperbanyak ke atas langkah demi langkah ke simpul elemen yang paling tidak spesifik (dokumen)
3. Capture Acara: Node paling sedikit menerima acara terlebih dahulu, sedangkan simpul yang paling spesifik harus menerima acara terakhir.
2. Penanganan acara
1.HTML Acara Pemrosesan: Langsung tambahkan ke struktur HTML
2. Pemrosesan Acara Level DOM0: Tetapkan fungsi ke atribut event handler
3. Penanganan Acara Level DOM2:
AddEventListener ("Nama Acara", "Fungsi Penangan Acara", Nilai Boolean)
Benar: Tangkapan Acara
Salah: Gelembung acara
hapuseventListener ();
4. IE Event Handler
lampiran
detachevent
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> </iteme> </head> <body> <v id = "div"> <tombol id = "btn1"> </tombol> </div> <!-<cript> function demo () {peringatan ("hello htm HTML </div> <! btn1 = document.getElementById("btn1");btn1.onclick = function(){alert("Hello DOM0 level event handler")};//overrided btn1.onclick = function(){alert("Hello DOM0 level event handler 2")};btn1.onclick = function(){alert("Hello DOM0 level event handler 3")};</script>--><!--<script>var btn1 = document.getElementById("btn1");btn1.addEventListener("click",demo1);btn1.addEventListener("click",demo2);btn1.addEventListener("click",demo3);function demo1 () {alert ("DOM2 Level Event Handler 1");} function demo2 () {alert ("DOM2 Level Event Handler 2");} function Demo3 () {alert ("DOM2 Level Event Handler 3");} btn1.removeEventListener ("klik", demo2) </Script>-script>-script>->-> —removeEventEner ("klik", Demo) </Script>-Script>-Script>-Script>-Script>-Script>-Script>. document.geteLementById ("btn1"); if (btn1.addeventListener) {btn1.addeventListener ("klik", demo);} lain jika (btn1.attachevent) {btn1.attachevent ("onklick", demo)} lainnya {btn1.Attachevent ("onklick", demo)} lainnya demo () {alert ("hello");} </script> </body> </html>AKU AKU AKU. Objek acara
1. Objek Acara: Suatu objek akan dihasilkan ketika acara DOM dipicu.
2. Acara Acara Acara:
Jenis: Dapatkan jenis acara
Target: Dapatkan target acara
stoppropagation (): mencegah peristiwa dari gelembung
preventDefault (): Blok Perilaku Default Acara
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> </title> </head> <body> <v id = "div"> <tombol id = "btn1"> tombol </button> <a href = "http:/www.baidu.com" ID = "AID"> Baidu </a> </div> <script> document.geteLementById ("btn1"). AddEventListener ("klik", showType); document.geteLementById ("Div"). AddEventListener ("klik", showdiv); documentlement.getElementById ("AID") showType (event) {// alert (event.type); alert (event.target); event.stoppropagation (); // stop event bubbles} function showdiv () {alert ("div")} function showa (event) {// event.stoppropagation (); // event.preventdefauld (); event.stoppropagation ();/event.preventdefault (); event.stoppropagation ();/event.preventdefault (); event.stoppropagation ();/event.preventdefault (); event.stoppropagation ();