Analisis contoh model acara JavaScript

Artikel ini menjelaskan penggunaan model acara JavaScript. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:

1. Model acara

Bubbling: Peristiwa diturunkan dari node daun di sepanjang node leluhur ke simpul akar ke atas.

Menangkap: Dari elemen teratas pohon DOM ke elemen paling akurat, berlawanan dengan acara gelembung

Model Acara Standar DOM: Standar DOM mendukung kedua peristiwa tipe gelembung dan acara tipe penangkapan. Dapat dikatakan sebagai kombinasi dari keduanya, pertama-tama, tipe penangkapan, dan kemudian transmisi tipe gelembung.

2. Objek acara

Di IE Browser, objek acara adalah properti jendela. Dalam standar DOM, acara harus diteruskan ke fungsi pemrosesan acara sebagai parameter unik.

Dapatkan objek acara yang kompatibel:

 function (event) {// event adalah fungsi pemrosesan yang dilewati sebagai parameter dari DOM Standard Event = Event? Event: window.event; }

Dalam IE, objek acara terkandung dalam pelepasan acara, sedangkan dalam standar DOM, objek terkandung dalam properti target

Dapatkan elemen yang ditunjukkan oleh objek acara yang kompatibel:

 var target = event.srcelement? event.srcelement: event.target;

Premisnya adalah untuk memastikan bahwa objek acara telah diperoleh dengan benar

3. Acara pendengar

Di bawah IE, pendengar terdaftar dieksekusi dalam urutan terbalik, yaitu, pendengar terdaftar dieksekusi terlebih dahulu.

 element.attachevent ('onClick', pengamat); // Daftarkan pendengar element.detachevent ('onClick', pengamat) // hapus pendengar

Parameter pertama adalah nama acara, dan yang kedua adalah fungsi pemrosesan callback

Di bawah standar DOM:

 element.addeventListener ('klik', pengamat, usecapture) element.removeeventlistener ('klik', pengamat, usecapture)

Parameter pertama adalah nama acara, tanpa awalan "ON", parameter kedua adalah fungsi pemrosesan callback, dan parameter ketiga menunjukkan apakah fungsi callback dipanggil pada tahap penangkapan atau pada tahap gelembung. Default true adalah tahap penangkapan

4. Pengiriman Acara

Batalkan pengiriman acara di browser yang kompatibel

 FUNGSI SomeHandler (event) {event = event || window.event; if (event.stoppropagation) // dom standard event.stoppropagation (); lain event.cancelbubble = true; // IE Standard}

Batalkan pemrosesan default setelah pengiriman acara

 FUNGSI SomeHandler (event) {event = event || window.event; if (event.preventdefault) // acara standar dom. preventdefault (); lain event.returnValue = true; // IE Standard}

Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.