Penjelasan terperinci tentang aliran_pengetahuan asas peristiwa DOM

1. Acara menggelegak

Model acara penyemak imbas terbahagi kepada dua jenis: merakam acara dan acara menggelegak. Memandangkan IE tidak menyokong peristiwa menangkap, perkara berikut menggunakan peristiwa menggelegak sebagai penjelasan. (Alih suara menggelegak) Bubbling bermaksud peristiwa dicetuskan satu demi satu daripada acara paling khusus kepada acara paling kurang spesifik.

Salin kod Kod adalah seperti berikut: ')"> ')"> ')"> klik saya

fungsi tambah(sTeks) { var ulo = document.getElementById("paparan"); ulo.innerHTML = sTeks; }

Tiga fungsi di atas semuanya menambah fungsi onclick Ketiga-tiga fungsi dicetuskan selepas elemen p tunggal dilaksanakan dahulu, kemudian div, dan akhirnya badan

Omong-omong, berikut ialah peringatan untuk menangkap acara, yang susunannya betul-betul bertentangan dengan acara menggelegak.

2. Pemantauan acara

Peristiwa memerlukan fungsi untuk bertindak balas. Fungsi jenis ini biasanya dipanggil pengendali peristiwa Dari perspektif lain, fungsi ini memantau sama ada peristiwa berlaku dalam masa nyata. fungsi mendengar acara sangat berbeza antara pelayar yang berbeza.

i. Kaedah mendengar universal, seperti menggunakan kaedah onclick, hampir setiap teg menyokong kaedah ini. Dan keserasian penyemak imbas adalah sangat tinggi Perakaunan untuk tingkah laku, pemisahan peristiwa. Secara amnya, kaedah berikut digunakan untuk memantau

Salin kod Kod adalah seperti berikut: klik var opp = document.getElementById("me"); //Cari acara opp.onclick = function(){ //Tetapkan fungsi acara alert("Saya telah diklik!") }

Dua kaedah yang diperkenalkan di atas sangat mudah dan disukai oleh pembangun Everbright apabila membuat dan memproses beberapa fungsi kecil. Tetapi untuk acara yang sama. Mereka hanya boleh menambah satu fungsi, seperti fungsi onclick tanda p Kedua-dua kaedah hanya boleh mempunyai satu fungsi. Pada masa yang sama, DOM standard menyediakan kaedah lain.

ii.Kaedah pemantauan dalam IE Dalam pelayar IE awal, setiap elemen mempunyai dua kaedah untuk mengendalikan pemantauan masa. Mereka adalah attachEvent() dan detachEnevt() masing-masing. Seperti yang dapat dilihat daripada nama fungsinya, attachEnevt() ialah fungsi yang digunakan untuk menambah pemprosesan acara pada elemen, manakala detachEvent() digunakan untuk memadamkan fungsi mendengar pada elemen. Sintaks mereka adalah seperti berikut:

[objek].attachEvent("enevt_handler","fnHandler"); [objek].detachEvent("enevt_handler","fnHandler"); Antaranya, enevt_handler mewakili onclick, onload, onmouseover, dll yang biasa digunakan. fnHandler ialah nama fungsi mendengar. Dalam acara di bahagian sebelumnya, anda boleh menggunakan kaedah attachEvent() dan bukannya menambah fungsi mendengar Apabila anda mengklik sekali, anda boleh menggunakan detachEvent() untuk memadam fungsi mendengar supaya ia tidak akan dilaksanakan selepas klik seterusnya. .

Salin kod Kod adalah seperti berikut: fungsi fnclick() { alert("Saya telah diklik!"); oP.detachEvent("onclick","fnclick"); } var oP; window.onload = function() { oP = document.getElementById("oop"); // Menjumpai objek Op.attachevent ("Onclick", "FNCLICK"); // Tambah fungsi pemantauan }

iii Tambah berbilang acara mendengar (iaitu)

Salin kod

Kod adalah seperti berikut: fungsi fnClick1(){ alert("Saya telah diklik oleh fnClick1"); } fungsi fnClick2(){ alert("Saya telah diklik oleh fnClick2"); //oP.detachEvent("onclick",fnClick1); //Padam fungsi mendengar 1 } var oP; window.onload = function(){ oP = document.getElementById("myP"); //Objek ditemui oP.attachEvent("onclick",fnClick1); //Tambah fungsi mendengar 1 oP.attachEvent("onclick",fnClick2); //Tambah fungsi mendengar 2 }

3. Pemantauan acara DOM standard

Berbanding dengan dua kaedah iaitu, DOM standard juga menggunakan dua kaedah untuk menambah dan memadam fungsi mendengar masing-masing. Iaitu addEventListener(), dan removeEventListener()

Tidak seperti iaitu, kedua-dua fungsi ini menerima 3 parameter, iaitu nama acara, nama fungsi yang akan diberikan dan sama ada ia digunakan dalam fasa menggelegak atau fasa menangkap. Parameter dalam fasa tangkapan adalah benar, dan parameter dalam fasa menggelegak adalah palsu

Salin kod

Kod adalah seperti berikut: [objek].addEventListener("event_name",fnHandler,bCapture); [objek].removeEventListener("event_name",fnHandler,bCapture); Penggunaan kedua-dua fungsi ini pada asasnya serupa dengan yang di Ie, tetapi sila ambil perhatian bahawa nama event_name ialah "klik", "mouseover", dll., bukannya "onclick", "onmouseover" dalam Ie.

Selain itu, parameter ketiga bCapture biasanya ditetapkan kepada peringkat palsu, menggelegak. Kaedah mendengar acara DOM standard:

Salin kod

Kod adalah seperti berikut: fungsi fnClick1() { alert("Saya telah diklik 1"); oP.removeEventListener("klik", fnClick1, false); } fungsi fnClick2() { alert("Saya telah diklik 2"); }

window.onload = function() { oP = document.getElementById("myP"); oP.addEventListener("klik", fnClick1, false); oP.addEventListener("klik", fnClick2, false); } <p id;

Anda boleh menguji urutan pelaksanaan tertentu.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.