Contoh analisis model tangkapan peristiwa dan model menggelegak dalam kemahiran js_javascript

Contoh dalam artikel ini menerangkan model tangkapan peristiwa dan model menggelegak dalam js. Kongsikan dengan semua orang untuk rujukan anda.

Kaedah pelaksanaan khusus adalah seperti berikut:

Contoh 1:

Salin kod Kod adalah seperti berikut: window.onload = function(){ document.getElementById('par').addEventListener('click',function() {alert('par');},true); document.getElementById('son').addEventListener('click',function() {alert('son');},true); } #par{width:300px;height:200px;background:grey;} #son{width:200px;height:100px;background:green;} Contoh 2: Salin kod Kod adalah seperti berikut: window.onload = function(){ document.getElementById('par').addEventListener('click',function() {alert('par');}); document.getElementById('son').addEventListener('click',function() {alert('son');}); } #par{width:300px;height:200px;background:grey;} #son{width:200px;height:100px;background:green;} addEventListener: Parameter ketiga adalah pilihan Secara lalai, ia adalah palsu, yang bermaksud model menggelegak, iaitu lapisan terkecil (div dengan id anak) dicetuskan terlebih dahulu dan jika parameter sebenar ditambah , ini bermaksud tangkapan Model (dari html-->body--->div), dicetuskan pada tahap ini.

Kod HTML Contoh 1 mempunyai dua div Div kecil terkandung dalam div besar Apabila div kecil diklik, peristiwa amaran('par') akan dicetuskan dahulu; ) acara akan dicetuskan . Contoh 2 adalah sebaliknya.

Jika atribut "object.onclick" digunakan untuk mencetuskan acara, model menggelegak digunakan.

IE tidak menyokong addEventListener, tetapi menggunakan attachEvent. Tetapi attachEvent tidak menyokong parameter ketiga, ia tidak menangkap model.

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.