Bacaan terkait:
JavaScript Event Learning Ringkasan (V) Jenis acara tikus di JS
//www.vevb.com/article/86259.htm
JavaScript Ringkasan Pembelajaran Acara (i) Aliran Acara
//www.vevb.com/article/86261.htm
Ringkasan Pembelajaran Acara Javascript (IV) Anggota Umum Acara (Properti dan Metode)
//www.vevb.com/article/86262.htm
Ringkasan Pembelajaran Acara Javascript (II) JS Event Handler
//www.vevb.com/article/86264.htm
Ringkasan Pembelajaran Acara Javascript (III) Objek Acara JS
1. Anggota publik objek acara
1. Anggota Umum Acara di DOM
Objek acara berisi properti dan metode yang terkait dengan peristiwa spesifik yang membuatnya. Jenis peristiwa yang dipicu berbeda, dan sifat dan metode yang tersedia berbeda. Namun, semua acara di DOM memiliki anggota publik berikut.
A. Perbandingan CurrentTarget dan Target
Di dalam event handler, objek ini selalu sama dengan nilai currentTarget, dan target hanya berisi target aktual dari acara tersebut.
Misalnya: Ada tombol pada halaman, daftarkan acara klik di tubuh (simpul induk tombol). Saat tombol diklik, acara klik akan menggelembung ke tubuh untuk diproses.
<body> <input id = "btn" type = "tombol" value = "klik"/> <script> document.body.onClick = function (event) {console.log ("klik acara terdaftar di body"); console.log ("this === event.currentTarget?"+(this === event.currentTarget)); // true console.log ("currentTarget === document.body?"+(event.currentTarget === document.body)); // true console.log ('event.target === document.geteLementById ("btn")?'+(event.target === document.getElementById ("btn"))); // true} </script> </body>Hasil berjalan adalah:
B. Melalui atribut Type, beberapa peristiwa dapat ditangani dalam suatu fungsi.
Prinsip: Peristiwa yang berbeda ditangani secara berbeda dengan mendeteksi Atribut Event.Type.
Misalnya: Tentukan fungsi penangan untuk menangani 3 jenis acara: klik, mouseover, mouseout.
<body> <input id = "btn" type = "tombol" value = "klik"/> <script> var handler = function (event) {switch (event.type) {case "klik": waring ("diklik"); merusak; case "mouseover": event.target.style.backgroundcolor = "pink"; merusak; case "mouseout": event.target.style.backgroundColor = ""; }}; var btn = document.getElementById ("btn"); btn.onClick = handler; btn.onmouseover = handler; btn.onmouseout = handler; </script> </body>Jalankan Efek: Klik tombol dan kotak muncul. Ketika mouse melewati tombol, warna latar belakang tombol menjadi merah muda; Saat mouse meninggalkan tombol, warna latar belakang kembali ke default.
C. Perbandingan stoppropagation () dan stopimmediatePropagation ()
Sama: stoppropagation () dan stopimmediatePropagation () dapat digunakan untuk membatalkan penangkapan lebih lanjut atau menggelegak peristiwa.
Berbeda: Perbedaan antara keduanya adalah bahwa ketika suatu peristiwa memiliki beberapa penangan acara, StopimMediatePropagation () dapat mencegah event handler dipanggil nanti.
Misalnya:
<body> <input id = "btn" type = "tombol" value = "klik"/> <script> var btn = document.getElementById ("btn"); btn.addeventListener ("klik", function (event) {console.log ("Buttn klik didengarkan sekali"); // event.stoppropagation (); // Efek Melihat unserComment // event.stopimmediatePropagation (); // Efek Melihat unscomment}, false); btn.addeventListener ("klik", function () {console.log ("Klik tombol Mendengar dua kali");}, false); document.body.onClick = function (event) {console.log ("body diklik"); } </script> </body>Efek Menjalankan:
D, Eventphase
Nilai Eventphase adalah 1 dalam fase penangkapan, 2 dalam fase target, dan 3 dalam fase gelembung.
contoh:
<body> <input id = "btn" type = "tombol" value = "klik"/> <script> var btn = document.geteLementById ("btn"); btn.onONClick = fungsi (acara) {console.log ("Tombol DOM0 Metode Tambah Event Handler Nilai Eventphase Handler Eventphase is?"+event.eventPhase);}btn.addEventListener("click",function(event){ console.log("button DOM2-level method adds event handler, and the eventPhase value is "+event.eventPhase);},true);btn.addEventListener("click",function(event){ console.log("button DOM2-level method adds event Handler, dan nilai EventPhase adalah "+event.eventphase);}, false); document.body.addEventListener("click", function (event) { console.log("body adds event handler, and the eventPhase value is "+event.eventPhase); },true);document.body.addEventListener("click", function (event) { console.log("body adds event handler, and the eventPhase value is "+event.eventphase);}, false); </script>Efek Menjalankan:
2. Anggota Umum Acara di IE
Properti dan metode peristiwa dalam IE akan bervariasi dari jenis acara ke DOM, tetapi beberapa adalah anggota publik yang dimiliki semua objek, dan sebagian besar anggota ini memiliki properti atau metode DOM yang sesuai.
Di atas adalah pengetahuan yang relevan dari anggota publik (atribut dan metode) dari acara yang diperkenalkan editor kepada Anda (iv) dan saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan!