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.