Ada tiga cara untuk menangani event JavaScript: 1. Event handler HTML, tambahkan event handler langsung di kode HTML, sintaksnya adalah "<element event=event function...>"; 2. Event handler level DOM0, untuk objek yang ditentukan Untuk menambahkan pemrosesan peristiwa, sintaksnya adalah "elemen objek.event=function(){...}"; 3. Pengendali peristiwa tingkat DOM2 juga ditambahkan ke objek tertentu dan terutama digunakan untuk menangani operasi penentuan dan menghapus event handler.
Lingkungan pengoperasian tutorial ini: sistem Windows 10, JavaScript versi 1.8.5, komputer Dell G3.
3 Cara Menggunakan Penangan Acara Javascript
Ketika suatu peristiwa terjadi, kita harus menanganinya. Ada tiga metode utama pengendali peristiwa Javascript:
1. Pengendali acara HTML
Artinya, kita menambahkan event handler langsung di kode HTML, seperti kode berikut:
<input id="btn" value="Button" type="button" onclick="showmsg();"> <script> function showmsg(){ alert("HTML menambahkan penanganan kejadian");Dari kode di atas, kita dapat melihat bahwa pemrosesan acara langsung bersarang di elemen. Ini memiliki masalah: kopling antara kode HTML dan js terlalu kuat. Jika suatu saat Anda ingin mengubah showmsg di js, maka tidak hanya itu apakah Anda harus Jika Anda memodifikasinya di js, Anda juga perlu memodifikasinya dalam html. Kami dapat menerima satu atau dua modifikasi, tetapi ketika kode Anda mencapai level 10.000 baris, modifikasi akan membutuhkan banyak waktu dan uang , kami tidak merekomendasikan metode ini.
2. Pengendali kejadian DOM level 0
Yaitu untuk menambahkan pemrosesan event pada objek yang ditentukan, lihat potongan kode berikut:
<input id="btn" value="Button" type="button"> <skrip> var btn= document.getElementById("btn"); btn.onclick=function(){ alert("Pemrosesan peristiwa penambahan level DOM" ); } btn.onclick=null;//Jika Anda ingin menghapus event klik btn, setel saja ke null</script>Dari kode di atas, kita dapat melihat bahwa dibandingkan dengan event handler HTML, event DOM level 0, hubungan antara kode HTML dan kode js telah sangat berkurang. Namun, programmer yang cerdas masih belum puas dan berharap menemukan cara yang lebih sederhana untuk mengatasinya. Mari kita lihat cara ketiga untuk mengatasinya.
3. Pengendali peristiwa tingkat DOM2
DOM2 juga menambahkan event handler ke objek tertentu, namun utamanya melibatkan dua metode untuk menangani operasi penentuan dan penghapusan event handler: addEventListener() dan deleteEventListener(). Semuanya menerima tiga parameter: nama event yang akan ditangani, fungsi sebagai event handler, dan nilai Boolean (apakah akan menangani event dalam fase capture), lihat potongan kode berikut:
<input id="btn" value="Button" type="button"> <skrip> var btn=document.getElementById("btn");//Di sini kita are Setel nilai terakhir ke false, artinya, tidak akan diproses pada tahap pengambilan. Secara umum, pemrosesan penggelembungan memiliki kompatibilitas yang lebih baik di berbagai browser. function showmsg(){ alert("level DOM menambahkan event handler" } btn.removeEventListener ("click",showmsg,false);//Jika Anda ingin menghapus event ini, cukup masukkan parameter yang sama</script>Di sini kita dapat melihat bahwa saat menambah dan menghapus pemrosesan event, metode terakhir lebih langsung dan sederhana. Namun, Ma Haixiang mengingatkan semua orang bahwa saat memproses peristiwa penghapusan, parameter yang diteruskan harus konsisten dengan parameter sebelumnya, jika tidak, penghapusan tidak valid!
Perluas pengetahuan Anda:
Alur peristiwa menggambarkan urutan peristiwa yang diterima pada suatu halaman. Pada hari-hari awal pengembangan browser, dua produsen browser utama IE dan Netscape berselisih satu sama lain, yang menyebabkan situasi yang membuat frustrasi aliran acara benar-benar berbeda definisinya. Itulah yang kita kenal: event yang menggelegak di IE, event capture di Netscape. Mari kita ambil gambar terlebih dahulu dan lihat sekilas strukturnya:
1. Acara menggelegak
Peristiwa yang menggelembung berarti bahwa peristiwa tersebut awalnya diterima oleh elemen yang paling spesifik (simpul dengan tingkat sarang terdalam dalam dokumen), dan kemudian menyebar ke atas ke simpul yang paling tidak spesifik (dokumen). Ambil gambar di atas untuk mengilustrasikan, ketika bagian teks diklik, pertama kali diterima oleh elemen di teks, dan kemudian disebarkan ke jendela langkah demi langkah, yaitu proses 6-7-8-9-10 dijalankan.
2. Pengambilan acara
Pengambilan peristiwa berarti bahwa peristiwa tersebut diterima oleh simpul yang kurang spesifik terlebih dahulu, dan simpul yang paling spesifik menerima peristiwa tersebut terakhir. Demikian pula, dalam model di atas, ketika bagian teks diklik, pertama kali diterima oleh jendela dan kemudian disebarkan ke elemen teks selangkah demi selangkah, yaitu proses 1-2-3-4-5 dijalankan.