Baru -baru ini, karena saya harus memodifikasi situs web setiap hari untuk membuat efek khusus untuk situs web, saya telah menonton banyak insiden kontak JS. Saya hanya tahu cara menggunakan sebagian kecil darinya. Terkadang itu juga cukup kacau ketika saya menggunakannya. Sekarang saya telah menyelesaikannya. Saya akan membaginya dengan platform jaringan Wulin untuk referensi Anda!
1. Apa itu acara JavaScript?
Acara adalah jantung dari aplikasi JavaScript dan lem yang menempelkan semuanya bersama -sama. Ketika kami memiliki jenis interaksi tertentu dengan halaman web di browser, peristiwa terjadi.
Acara dapat mengklik konten tertentu, melewati elemen tertentu, atau menekan tombol tertentu pada keyboard, dan peristiwa juga dapat menjadi sesuatu yang terjadi di browser web, seperti pemuatan halaman web tertentu, atau pengguna menggulir jendela atau mengubah ukuran jendela. Terus terang, peristiwa adalah momen interaksi khusus yang terjadi dalam dokumen atau browser!
Dengan menggunakan JavaScript, Anda dapat mendengarkan peristiwa tertentu dan menentukan bahwa peristiwa tertentu terjadi sebagai respons terhadapnya.
2. Aliran acara
Aliran acara menjelaskan urutan peristiwa yang diterima di halaman. Pada tahap awal pengembangan browser, dua produsen browser utama yaitu dan Netscape saling bertarung, dan situasi kecurangan terjadi, yaitu interpretasi mereka tentang aliran peristiwa menunjukkan dua definisi yang sepenuhnya berlawanan. Itulah yang kami kenal: yaitu gelembung acara, penangkapan acara Netscape. Mari kita ambil gambar terlebih dahulu dan perhatikan sebentar strukturnya:
1. Gelembung acara
Gelembung acara berarti bahwa acara tersebut pertama kali diterima oleh elemen yang paling spesifik (simpul dengan level bersarang terdalam dalam dokumen), dan kemudian menyebarkan ke atas langkah demi langkah ke simpul yang paling tidak spesifik (dokumen). Ambil diagram di atas untuk menggambarkan bahwa ketika mengklik bagian teks, pertama kali diterima oleh elemen di teks, dan kemudian merambat ke jendela langkah demi langkah, yaitu, proses 6-7-8-9-10 dieksekusi.
2. Tangkapan acara
Pengambilan acara berarti bahwa acara tersebut pertama kali diterima oleh simpul yang kurang spesifik, dan simpul yang paling spesifik akhirnya menerima acara tersebut. Demikian pula, dalam model di atas, ketika mengklik bagian teks, pertama kali diterima oleh jendela, dan kemudian menyebarkan ke elemen teks langkah demi langkah, yaitu, proses 1-2-3-4-5 dieksekusi.
Bagaimana kinerjanya dalam kode? Diberikan nanti!
3. Tiga cara untuk menangani acara JavaScript
Ketika suatu peristiwa terjadi, kita harus menghadapinya. Ada tiga cara utama untuk menangani penangan acara JavaScript:
1. HTML Event Handler
Artinya, kami langsung menambahkan penangan acara ke kode HTML, seperti kode berikut:
<input id = "btn" value = "Tombol" type = "tombol" ontClick = "showmsg ();"> <script> function showmsg () {waspada ("html tambahkan pemrosesan acara"); } </script>Dari kode di atas, kita dapat melihat bahwa pemrosesan acara secara langsung bersarang dalam elemen. Ada masalah dengan ini: kopling antara kode HTML dan JS terlalu kuat. Jika Anda ingin mengubah showmsg di JS suatu hari, maka Anda tidak hanya perlu memodifikasinya di JS, tetapi juga perlu memodifikasinya dalam HTML. Kami dapat menerima satu atau dua modifikasi, tetapi ketika kode Anda mencapai tingkat 10.000 baris, itu akan dikenakan biaya orang dan uang untuk memodifikasinya. Karena itu, kami tidak merekomendasikan metode ini.
2. Penangan Acara Level DOM0
Artinya, tambahkan pemrosesan acara ke objek yang ditentukan, lihat kode berikut:
<input id = "btn" value = "tombol" type = "Tombol"> <script> var btn = document.getElementById ("btn"); btn.onClick = function () {alert ("Pemrosesan Acara Penambahan Level DOM"); } btn.onClick = null; // Jika Anda ingin menghapus acara klik BTN, atur ke null </script>Dari kode di atas, kita dapat melihat bahwa kopling antara peristiwa tingkat DOM0, kode HTML dan kode JS telah sangat berkurang dibandingkan dengan penangan acara HTML. Namun, pemrogram pintar masih belum puas dan berharap menemukan cara yang lebih sederhana untuk menghadapinya. Mari kita lihat metode ketiga.
3. Penangan Acara Level DOM2
DOM2 juga menambahkan penangan acara ke objek tertentu, tetapi terutama melibatkan dua metode, yang digunakan untuk menangani operasi penangan peristiwa menentukan dan menghapus: addeventListener () dan RemestEventListener (). Mereka semua menerima tiga parameter: nama acara yang akan diproses, fungsi sebagai penangan acara, dan nilai boolean (apakah acara tersebut diproses dalam tahap penangkapan), lihat kode berikut:
<input id = "btn" value = "tombol" type = "Tombol"> <script> var btn = document.getElementById ("btn"); btn.addeventListener ("klik", showmsg, false); // Di sini kita menetapkan nilai terakhir menjadi false, yaitu, tidak diproses dalam tahap penangkapan. Secara umum, pemrosesan gelembung lebih kompatibel di setiap fungsi browser function showmsg () {alert ("DOM Level Add Event Handler"); } btn.removeEventListener ("klik", showmsg, false); // Jika Anda ingin menghapus acara ini, Anda hanya perlu melewati parameter yang sama </script>Di sini kita dapat melihat bahwa saat menambahkan dan menghapus acara, metode terakhir lebih langsung dan paling sederhana. Namun, Ma Haixiang mengingatkan semua orang bahwa ketika memproses acara Hapus, parameter yang dilewatkan harus konsisten dengan parameter sebelumnya, jika tidak, penghapusan akan tidak valid!
4. Proses dan perbedaan antara gelembung acara dan penangkapan acara
Karena itu, izinkan saya memberi Anda beberapa kode untuk menjelaskan proses gelembung acara dan event capture, dan pada saat yang sama memungkinkan Anda melihat perbedaan antara keduanya:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-"> <itement> dokumen </iteme> <tyle> #p {width: px; tinggi: px; border: px solid black;} #c {width: px; tinggi: px; border: px solid red; www.mahaixiang.cn <div id = "c"> Saya suka www.mahaixiang.cn </div> </div> <script> var p = document.geteLementById ('p'); var c = document.getElementById ('c'); c.addeventListener ('klik', function () {alert ('Child Node Capture')}, true); c.addeventListener ('klik', function () {alert ('Child Node Bubbles')}, false); p.addeventListener ('klik', function () {alert ('Child Node Bubbles')}, false); </script> </body> </html>Saat menjalankan kode di atas dan mengklik elemen anak, kami akan menemukan bahwa urutan eksekusi adalah: Node Parent Capture-Child Node Capture-Child-Child Node Bubble-Parent Node Bubble. Dari contoh ini, kita dapat memahami bahwa di samping itu, acara Level DOM2 menetapkan bahwa acara termasuk tiga tahap:
1. Tahap Penangkapan Acara;
2. Dalam tahap target;
3. Panggung Gelembung Acara.
Pertama, itu ditangkap, kemudian pada tahap target (yaitu, ke lokasi di mana acara dikeluarkan), dan akhirnya menggelembung. Yang tidak ilmiah adalah bahwa tidak ada program penanganan acara tingkat DOM1. Harap perhatikan dan berhentilah membuat lelucon!
5. Suplemen
1. Pengawal Acara IE juga memiliki dua metode: attachEvent () menambahkan acara dan detachevent () menghapus acara. Dua metode ini menerima dua parameter yang sama: nama penangan acara dan fungsi pemrosesan transaksi. Mengapa tidak ada nilai boolean di sini? Karena IE8 dan versi sebelumnya hanya mendukung gelembung acara, parameter terakhir setara dengan false secara default untuk ditangani! (Browser yang mendukung penangan acara IE termasuk IE, Opera).
2. Objek acara adalah objek yang digunakan untuk merekam informasi yang relevan ketika beberapa peristiwa terjadi, tetapi objek peristiwa hanya akan dihasilkan ketika peristiwa terjadi, dan hanya dapat diakses secara internal oleh fungsi penangan acara. Setelah semua fungsi penangan acara dijalankan, objek acara dihancurkan!
Di atas adalah cara untuk menangani acara JavaScript (tiga jenis) yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda!