Bicara singkat tentang pemantauan acara di JavaScript

Penulis：Eve Cole Waktu Pembaruan：2022-06-28 09:23:03

Artikel ini memberi Anda pengetahuan yang relevan tentang JavaScript, yang terutama mengatur masalah-masalah yang berkaitan dengan pemantauan peristiwa, termasuk apa itu pemantauan peristiwa, cara mengatur pemantauan peristiwa, dll. Mari kita simak bersama-sama. membantu.

Apa itu "pemantauan peristiwa"?

DOM memungkinkan kita menulis kode JS untuk memungkinkan elemen HTML merespons peristiwa ;

peristiwa :

interaksi antara pengguna dan halaman web; misalnya: klik pada halaman web;

terjadi kapan saja . Dengan demikian, dengan menjalankan beberapa program yang telah ditulis sebelumnya oleh pemrogram;

ada dua cara utama untuk menyetel pendengar acara: onxxx dan addEventListener() ;

cara

paling sederhana untuk menyetel pendengar acara adalah

dengan menyetel atribut onxxx mereka ;

() {
    // Ketika kotak diklik, pernyataan di sini akan dieksekusi}

Pemantauan peristiwa mouse umum

nama peristiwa	deskripsi peristiwa
onclick	ketika mouse tunggal pada suatu objek
ondblclick	ketika mouse mengklik dua kali pada suatu objek
onmousedown	ketika tombol mouse ditekan objek
onmouseup	ketika tombol mouse dilepaskan pada objek
onmousemove	ketika tombol mouse digerakkan pada objek
onmouseenter	ketika mouse memasuki suatu objek (peristiwa serupa onmouseover)
onmouseleave	ketika mouse meninggalkan suatu objek (peristiwa serupa onmouseout)

Pemantauan peristiwa keyboard umum

peristiwa

nama	deskripsi peristiwa
onkeypress	ketika tombol keyboard ditekan (tombol sistem seperti tombol panah dan tombol fungsi tidak dapat dikenali)
onkeydown	ketika tombol keyboard ditekan (tombol sistem dapat dikenali, dan akan terjadi sebelum onkeypress)
onkeyup	Ketika tombol keyboard dirilis

Acara formulir umum mendengarkan

saat

nama acara	Deskripsi acara
onchange	Saat pengguna mengubah konten bidang formulir, hal ini akan memicu
fokus	Saat elemen mendapatkan fokus (seperti tombol tab atau klik Mouse)
menjadi kabur	saat elemen kehilangan fokus
saat dikirim	saat formulir diserahkan
direset	saat formulir disetel ulang

Halaman umum pemantauan acara

nama acara	deskripsi acara
onload	saat halaman atau gambar selesai memuat
onunload	saat pengguna keluar dari halaman

Propagasi acara

dimulai dari luar ke dalam (fase pengambilan) , lalu dari dari dalam ke luar (fase penggelembungan).

Namun, penulisan seperti onxxx (DOM

level

0) hanya dapat memantau fase penggelembungan ; jadi Anda perlu menggunakan metode addEventListener() (DOM level 2);

, fungsi(){
    // Ini adalah fungsi pemrosesan peristiwa}, true) // true berarti mendengarkan fase capture, false berarti mendengarkan fase bubble.

Catatan:

Elemen terdalam tidak lagi membedakan antara fase capture dan bubble Monitoring tertulis di depan akan dieksekusi terlebih dahulu, dan kemudian Pemantauan ditulis setelah eksekusi;
jika dua atau lebih peristiwa yang sama dengan nama yang sama ditetapkan untuk suatu elemen, peristiwa yang ditulis kemudian di tingkat DOM0 akan menimpa peristiwa yang ditulis terlebih dahulu sementara tingkat DOM2 akan dieksekusi memesan ;