Kaedah pengendalian acara JavaScript (tiga jenis)_kemahiran javascript

Baru-baru ini, kerana saya perlu mengubah suai laman web setiap hari dan melakukan kesan khas untuk laman web, saya telah melihat banyak acara pendedahan js saya hanya menggunakan sebahagian kecil daripadanya. Sekarang saya telah menyusunnya secara sistematik dengan ini berkongsi di platform Script House untuk rujukan anda!

1. Apakah acara JavaScript?

Acara ialah nadi utama aplikasi JavaScript dan gam yang menyatukan segala-galanya Acara berlaku apabila kami melakukan jenis interaksi tertentu dengan halaman web dalam penyemak imbas.

Acara itu mungkin pengguna mengklik beberapa kandungan, tetikus melepasi elemen tertentu atau menekan kekunci tertentu pada papan kekunci Peristiwa itu juga mungkin berlaku dalam penyemak imbas web, seperti memuatkan halaman web. atau pengguna menatal atau mengubah saiz tetingkap. Secara terang-terangan, peristiwa ialah detik interaksi tertentu yang berlaku dalam dokumen atau penyemak imbas!

Dengan menggunakan JavaScript, anda boleh mendengar peristiwa tertentu berlaku dan menentukan bahawa peristiwa tertentu berlaku sebagai tindak balas kepada peristiwa tersebut.

2. Aliran acara

Aliran acara menerangkan susunan acara diterima pada halaman Pada masa awal pembangunan penyemak imbas, dua pengeluar penyemak imbas utama IE dan Netscape bersaing antara satu sama lain, dan perangkap berlaku, iaitu tafsiran mereka. aliran peristiwa muncul. Itulah yang kita biasa dengan: acara menggelegak IE, tangkapan acara Netscape. Mari ambil gambar dahulu untuk melihat secara ringkas struktur:

1. Acara menggelegak

Peristiwa menggelegak bermakna peristiwa itu pada mulanya diterima oleh elemen yang paling khusus (nod dengan tahap bersarang paling dalam dalam dokumen), dan kemudian merambat ke atas ke nod yang paling kurang spesifik (dokumen). Ambil gambar di atas untuk menggambarkan, apabila bahagian teks diklik, ia mula-mula diterima oleh elemen pada teks, dan kemudian disebarkan ke tetingkap langkah demi langkah, iaitu, proses 6-7-8-9-10 dilaksanakan.

2. Tangkapan acara

Tangkapan peristiwa bermakna acara diterima oleh nod yang kurang spesifik dahulu, dan nod paling spesifik menerima peristiwa terakhir. Begitu juga, dalam model di atas, apabila bahagian teks diklik, ia pertama kali diterima oleh tetingkap dan kemudian disebarkan ke elemen teks langkah demi langkah, iaitu, proses 1-2-3-4-5 dilaksanakan.

Bagaimanakah ia dinyatakan dalam kod? Akan diberikan kemudian!

3. Tiga cara pengendali acara Javascript

Apabila sesuatu peristiwa berlaku, kita perlu mengendalikannya Terdapat tiga kaedah utama pengendali acara Javascript:

1. Pengendali acara HTML

Iaitu, kami menambah pengendali acara terus dalam kod HTML, seperti kod berikut:

<input id="btn" value="按钮" type="button" onclick="showmsg();">
　　<script>
　　 function showmsg(){
　　 alert("HTML添加事件处理");
　　 }
　　</script> 

Daripada kod di atas, kita dapat melihat bahawa pemprosesan acara bersarang secara langsung dalam elemen Ini mempunyai masalah: gandingan antara kod html dan js terlalu kuat Jika suatu hari anda ingin menukar showmsg dalam js, maka tidak hanya anda perlu mengubah suainya dalam js, tetapi anda juga perlu mengubah suainya dalam html Kami boleh menerima satu atau dua pengubahsuaian, tetapi apabila kod anda mencapai tahap 10,000 baris, pengubahsuaian akan memerlukan banyak masa dan wang, jadi kami tidak menggunakan kaedah ini.

2. Pengendali acara tahap 0 DOM

Iaitu untuk menambah pemprosesan acara untuk objek yang ditentukan, lihat sekeping kod berikut:

<input id="btn" value="按钮" type="button">
　　<script>
　　　　var btn= document.getElementById("btn");
　　 btn.onclick=function(){
　　　　　　alert("DOM级添加事件处理");
　　　　} 
　　　　btn.onclick=null;//如果想要删除btn的点击事件，将其置为null即可
　　</script> 

Daripada kod di atas, kita dapat melihat bahawa berbanding dengan pengendali acara HTML, acara tahap DOM 0, gandingan antara kod html dan kod js telah dikurangkan dengan banyak. Walau bagaimanapun, pengaturcara yang bijak masih tidak berpuas hati dan berharap untuk mencari cara yang lebih mudah untuk menanganinya. Mari kita lihat cara ketiga untuk menanganinya.

3. Pengendali acara DOM tahap 2

DOM2 juga menambah pengendali acara pada objek tertentu, tetapi terutamanya melibatkan dua kaedah untuk mengendalikan operasi penetapan dan pemadaman pengendali acara: addEventListener() dan removeEventListener(). Kesemuanya menerima tiga parameter: nama acara yang akan diproses, fungsi sebagai pengendali acara dan nilai Boolean (sama ada untuk mengendalikan acara dalam fasa tangkapan), lihat sekeping kod berikut:

<input id="btn" value="按钮" type="button">
　　<script>
　　 var btn=document.getElementById("btn");
　　 btn.addEventListener("click",showmsg,false);//这里我们把最后一个值置为false，即不在捕获阶段处理，一般来说冒泡处
理在各浏览器中兼容性较好
　　 function showmsg(){
　　 alert("DOM级添加事件处理程序");
　　 }
　　 btn.removeEventListener("click",showmsg,false);//如果想要把这个事件删除，只需要传入同样的参数即可
　　</script>

Di sini kita dapat melihat bahawa apabila menambah dan memadam pemprosesan acara, kaedah terakhir adalah lebih langsung dan paling mudah. Walau bagaimanapun, Ma Haixiang mengingatkan semua orang bahawa semasa memproses acara pemadaman, parameter yang dihantar mesti konsisten dengan parameter sebelumnya, jika tidak pemadaman akan menjadi tidak sah!

4 Proses dan perbezaan antara acara menggelegak dan menangkap acara

Bercakap mengenainya, izinkan saya memberi anda beberapa kod untuk menerangkan proses menggelegak acara dan tangkapan acara, dan juga membolehkan anda melihat perbezaan antara kedua-duanya:

<!doctype html>
　　<html lang="en">
　　<head>
　　 <meta charset="UTF-">
　　 <title>Document</title>
　　 <style>
　　 #p{width:px;height:px;border:px solid black;}
　　 #c{width:px;height:px;border:px solid red;}
　　 </style>
　　</head>
　　<body>
　　 <div id="p">
　　 i am www.mahaixiang.cn
　　 <div id="c">i like www.mahaixiang.cn</div>
　　 </div>
　　 <script>
　　 var p = document.getElementById('p');
　　 　　var c = document.getElementById('c');
　　 c.addEventListener('click', function () {
　　 alert('子节点捕获')
　　 }, true);
　　 c.addEventListener('click', function () {
　　 alert('子节点冒泡')
　　 }, false);
　　 p.addEventListener('click', function () {
　　 alert('父节点捕获')
　　 }, true);
　　 p.addEventListener('click', function () {
　　 alert('父节点冒泡')
　　 }, false);
　　 </script>
　　</body>
</html> 

Jalankan kod di atas dan klik pada elemen anak Kami akan mendapati bahawa susunan pelaksanaan ialah: penangkapan nod induk--penangkapan nod anak--nod anak menggelegak--nod ibu bapa menggelegak. Daripada contoh ini, semua orang akan faham Selain itu, acara DOM tahap 2 menetapkan bahawa acara termasuk tiga peringkat:

1. Fasa tangkapan acara;

2. Dalam peringkat sasaran;

3. Peringkat menggelegak acara.

Mula-mula ia menangkap, kemudian ia berada di peringkat sasaran (iaitu, apabila ia datang ke lokasi di mana acara itu dihantar), dan akhirnya ia menggelegak. Apa yang tidak saintifik ialah tiada pengendali acara peringkat DOM1 Sila ambil perhatian, jangan buat lawak!

5 1. Pengendali acara IE juga mempunyai dua kaedah: attachEvent() untuk menambah acara, dan detachEvent() untuk memadamkan acara ini menerima dua parameter yang sama: nama pengendali acara dan fungsi pemprosesan acara. Mengapa tiada nilai boolean di sini? Oleh kerana IE8 dan versi terdahulu hanya menyokong acara menggelegak, parameter terakhir lalai kepada palsu! (Pelayar yang menyokong pengendali acara IE termasuk IE dan opera).
2. Objek peristiwa ialah objek yang digunakan untuk merekodkan beberapa maklumat yang berkaitan apabila sesuatu peristiwa berlaku, tetapi objek peristiwa hanya dijana apabila peristiwa itu berlaku, dan hanya boleh diakses dalam fungsi pemprosesan peristiwa, selepas semua fungsi pemprosesan peristiwa telah selesai berjalan, objek acara dimusnahkan!

Di atas adalah kaedah pemprosesan acara JavaScript (tiga jenis) yang diperkenalkan oleh editor kepada anda.