Artikel ini merangkum kejadian umum JS DOM untuk semua orang, yang memiliki nilai referensi tertentu dapat dirujuk.
klik klik dblclick klik dua kali menu konteks klik kanan mouseover mouse melayang pada elemen, disarankan untuk menggunakan mouseenter daripada mouseout mouse meninggalkan elemen, disarankan untuk menggunakan mouseleave daripada menggunakan mouseout mousemasukkan mouse melayang di atas elemen mousebiarkan mouse meninggalkan elemen tombol mousedown mouse tekan mouseup tombol mouse angkat mousemove gerakan mouse
tombol keyboard keydown ditekan tombol keyboard keyup terangkat penekanan tombol tombol keyboard ditekan, digunakan untuk memasukkan kunci karakter
1. Elemen mana dapat mendengarkan acara keyboard?
① dokumen
② Elemen yang bisa mendapatkan fokus (kontrol formulir, terutama elemen input)
2. Apa perbedaan antara keydown dan keypress?
① keydown dapat dipicu dengan menekan semua tombol, dan tidak dapat membedakan antara tombol huruf besar dan huruf kecil.
② Penekanan tombol hanya dapat dipicu ketika tombol yang dapat memasukkan karakter ditekan, dan tombol tersebut peka huruf besar-kecil.
3. Bagaimana cara mengetahui tombol mana yang ditekan?
Gunakan atribut dalam objek acara:
evnet.keyCode mendapatkan nilai ascii yang sesuai dengan
acara kunci. Yang sama dengan keyCode
event.key mendapatkan nilai karakter kunci.
akan dipicu ketika semua elemen di halaman dimuat. Anda dapat mendengarkan elemen jendela atau isi hanya dapat menggunakan addEventListener untuk mendengarkan event sebelumunload. Perbedaan antara event load dan event DOMContentLoaded yang dipicu ketika halaman web ditutup
:
① Event load dipicu hanya setelah semua yang ada di halaman dimuat, termasuk elemen dan eksternal sumber daya.
② Peristiwa DOMContentLoaded dapat dipicu ketika semua elemen di halaman dimuat, kecuali sumber daya eksternal.
dikirimkan dipicu ketika formulir dikirimkan. reset dipicu ketika formulir disetel ulang. Peristiwa ini mendengarkan elemen formulir. Fokus dipicu ketika kontrol formulir memperoleh fokus. Kekaburan dipicu ketika kontrol formulir kehilangan fokus .perubahan Untuk kotak input, Ini hanya akan dipicu ketika konten berubah dan fokus hilang cocok untuk pilih
memuat pengunduhan file gambar selesai kesalahan pemuatan gambar
mengubah ukuran memantau jendela dan perubahan ukuran area pandang gulir; memonitor jendela atau elemen dengan badan gulir, dipicu ketika konten di halaman atau elemen digulir.
Tetapkan parameter formal pertama ke fungsi panggilan balik peristiwa untuk mendapatkan objek peristiwa.
Jenis peristiwa yang berbeda memperoleh jenis objek Peristiwa yang berbeda.
offsetX/offsetY Mendapatkan koordinat posisi mouse pada elemen target clientX/clientY Mendapatkan koordinat posisi mouse pada viewport pageX/pageY Mendapatkan koordinat posisi mouse pada halaman screenX / screenY Mendapatkan posisi koordinat mouse pada layar Tombol posisi koordinat pada tombol mendapatkan tombol mouse mana yang ditekan, 0: tombol kiri; 2: tombol kanan
keyCode mendapatkan nilai kode yang sesuai dengan tombol yang sama dengan keyCode key Mendapatkan nilai karakter yang berhubungan dengan kunci
type Mendapatkan nama event timeStamp Mendapatkan jumlah milidetik sejak event dipicu target Mendapatkan elemen target stopPropagation() Mencegah event menggelembung preventDefault() Memblokir perilaku default Browser
dengan mengeksekusi event.stopPropagation() dalam fungsi panggilan balik peristiwa untuk mencegah penggelembungan.
Mengklik hyperlink untuk mengirimkan dan mengatur ulang formulir lompat, mengklik kanan untuk memunculkan menu sistem, dll...
panggil event.preventDefault() dalam fungsi panggilan balik acara untuk mencegah perilaku default.
Catatan: Jika Anda menggunakan metode kedua untuk mendengarkan peristiwa,
return falsedalam fungsi panggilan balik juga dapat mencegah perilaku default.
mendengarkan elemen leluhur, menentukan elemen target, dan melakukan operasi yang relevan jika elemen target memenuhi persyaratan.
Keuntungan delegasi acara:
Untuk mendengarkan acara yang sama pada sejumlah besar elemen, menggunakan delegasi acara lebih efisien daripada melintasi dan mendengarkan satu per satu.
Menggunakan delegasi acara memungkinkan elemen baru untuk merespons acara.
Rekomendasi terkait: [Tutorial video JavaScript]
Di atas adalah ringkasan terbaru dari peristiwa DOM JavaScript yang umum! Untuk lebih jelasnya silahkan perhatikan artikel terkait lainnya di website php Cina!
