Rumah > Artikel > hujung hadapan web > contoh model acara JavaScript kemahiran analisis_javascript
Contoh dalam artikel ini menerangkan penggunaan model acara JavaScript. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:
1. Model acara
Peristiwa menggelegak: Peristiwa dihantar dari nod daun di sepanjang nod nenek moyang sehingga ke nod akar
Menangkap peristiwa: daripada elemen atas pokok DOM kepada elemen paling tepat, berbanding peristiwa menggelegak
Model acara standard DOM: Standard DOM menyokong kedua-dua peristiwa menggelegak dan peristiwa menangkap Ia boleh dikatakan sebagai gabungan kedua-duanya, jenis tangkapan, dan kemudian penghantaran menggelegak
2. Objek acara
Dalam penyemak imbas IE, objek acara ialah atribut tetingkap Dalam standard DOM, acara mesti dihantar sebagai satu-satunya parameter kepada fungsi pemprosesan acara
Dapatkan objek acara yang serasi:
function(event){ //event 是作为DOM标准的参数传入处理函数 event = event ?event : window.event; }
Dalam IE, objek acara terkandung dalam srcElement acara, manakala dalam standard DOM, objek terkandung dalam atribut sasaran
Dapatkan elemen ditunjuk oleh objek acara yang serasi:
var target =event.srcElement ? event.srcElement : event.target ;
Premisnya adalah untuk memastikan objek acara telah diperoleh dengan betul
3. Pendengar acara
Di bawah IE, pendengar berdaftar dilaksanakan dalam susunan terbalik, iaitu, pendengar yang didaftarkan kemudian dilaksanakan dahulu
element.attachEvent('onclick',observer); //注册监听器 element.detachEvent('onclick',observer) //移除监听器
Parameter pertama ialah nama acara, dan parameter kedua ialah fungsi pengendali panggil balik
Di bawah standard DOM:
element.addEventListener('click',observer,useCapture) element.removeEventListener('click',observer,useCapture)
Parameter pertama ialah nama acara tanpa awalan "hidup", parameter kedua ialah fungsi pemprosesan panggil balik, dan parameter ketiga menunjukkan sama ada fungsi panggil balik dipanggil dalam fasa tangkapan atau fasa menggelegak dalam fasa tangkapan
4. Penghantaran acara
Batalkan penghantaran acara penyemak imbas secara serasi
function someHandler(event){ event = event || window.event; if(event.stopPropagation) //DOM标准 event.stopPropagation(); else event.cancelBubble = true; //IE标准 }
Pemprosesan lalai selepas membatalkan penghantaran acara
function someHandler(event){ event = event || window.event; if(event.preventDefault) //DOM标准 event. preventDefault (); else event.returnValue = true; //IE标准 }
Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.