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
Acara tikus
9 Acara mouse didefinisikan dalam acara Level DOM3.
Mousedown: dipicu saat tombol mouse ditekan (kiri atau kanan).
Tidak dapat dipicu oleh keyboard.
MouseUp: dipicu saat tombol mouse dilepaskan dan muncul.
Tidak dapat dipicu oleh keyboard.
Klik: dipicu saat mengklik tombol kiri mouse atau tekan tombol Enter. Ini penting untuk memastikan aksesibilitas, yang berarti bahwa event handler OnClick dapat dieksekusi baik melalui keyboard maupun melalui mouse. DBLCLICK: dipicu ketika tombol mouse kiri diklik dua kali. Mouseover: Pindahkan mouse di atas elemen target. Ini akan menembak ketika mouse bergerak di atas elemen keturunannya. Mouseout: Mouse menghapus elemen target di atas.
Mouseenter: Mouse bergerak ke kisaran elemen dan memicu peristiwa, yang tidak menggelembung, yaitu, tidak akan memicu ketika mouse bergerak ke elemen keturunannya.
Mouseleave: dipicu ketika mouse bergerak keluar dari rentang elemen, dan peristiwa tidak menggelembung, yaitu, ia tidak akan memicu ketika mouse bergerak ke elemen keturunannya.
Mousemove: Tikus terus dipicu saat bergerak di dalam elemen.
Tidak dapat dipicu oleh keyboard.
catatan:
Acara mousedown dan mouseUp dipicu secara berturut -turut pada elemen untuk memicu acara klik. Acara DBLClick akan dipicu hanya jika dua acara klik dipecat satu demi satu.
Jika salah satu mousedown atau mouseup dibatalkan, acara klik tidak akan dipicu. Jika acara klik dibatalkan secara langsung atau tidak langsung, acara DBLClick tidak akan dipicu.
1. Urutan pemicu peristiwa
Misalnya: Klik dua kali tombol dan lihat peristiwa yang dipicu di atas.
<body> <input id = "btn" type = "tombol" value = "klik"/> <script> var btn = document.getElementById ("btn"); btn.addeventListener ("mousedown", function (event) {console.log ("mousedown");}, false); btn.addeventListener ("mouseUp", function () {console.log ("mouseup");}, false); btn.addeventListener ("klik", function () {console.log ("klik");}, false); btn.addeventListener ("dblClick", function () {console.log ("dblClick");}, false); </script> </body>2. Perbedaan antara Mouseenter dan Mouseover
Perbedaannya:
Acara mouseover akan menggelembung, yang berarti akan menembak ketika mouse bergerak ke elemen keturunannya.
Acara Mouseenter tidak menggelembung, yang berarti bahwa mouse tidak akan menembak ketika bergerak ke elemen keturunannya.
Misalnya:
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <itement> </iteme> <tyle> #outer {position: absolute; Lebar: 200px; Tinggi: 200px; TOP: 0; Kiri: 0; Bawah: 0; Kanan: 0; margin: otomatis; Latar Belakang-Color: Merah Muda; } #inner {position: absolute; Lebar: 100px; Tinggi: 100px; Atas: 50%; Kiri: 50%; margin -kiri: -50px; latar belakang-warna: oranye; Teks-Align: tengah; Line-Height: 100px; } #luar, #dalam {border-radius: 50%; } </tyle> <skrip src = "jQuery-2.1.1.min.js"> </script> </head> <dod> <dig body> <v id = "Outer"> <div id = "dalam"> </div> </div> </script> var parentDiv = document.getelementsbyid ("oUter"); oMerDEVED ("{" {"{" oUderen. " console.log ("peristiwa mouseover dari div induk dipicu");}, false); // parentDiv.addeventListener ("mouseenter", function () {// console.log ("{{{{{{{{{{{{{{{{{{mouse," {{{{{mouse, " Console.log ("Peristiwa mouse dari div induk dipicu"); //}, false); // parentDiv.addeventListener ("mouseleave", function () {// console.log ("The Mouseleave Event dari Parent Div ditembakkan");//}, false); </Script> Body> HIT/HITRET>;catatan:
Mouseover sesuai dengan mouseout, mouseenter sesuai dengan mouseleave. Efeknya dapat tidak dikomentasikan dalam kode di atas.
Hover API di jQuery menggabungkan Mouseenter dan Mouseleave untuk digunakan.
3. Tombol mouse kiri dan kanan
<script type = "text/javascript"> document.onmousedown = function (ev) {var oevent = ev || event; waspada (oevent.button); // tombol kiri mouse di IE adalah 1, tombol mouse kanan adalah 2, dan tombol mouse kiri di FF dan tombol mouse kanan di chrome adalah 0, tombol mouse kanan adalah 2}; </script>4. Perbedaan antara mouseover dan mousemove
Secara umum, mouseover sudah cukup, tetapi mousemove hanya digunakan dalam keadaan khusus. Mousemove lebih memakan sumber daya, seperti memantau perubahan koordinat mouse.
Di atas adalah ringkasan pembelajaran acara JavaScript yang diperkenalkan kepada Anda oleh editor (v) pengetahuan terkait tentang acara mouse jenis acara di JS. Saya harap ini akan membantu semua orang!