KeyDown, KeyPress, KeyUp: Apakah Perbezaannya dan Bila Anda Perlu Menggunakan Setiap Satu?

Memahami onKeyPress lwn. onKeyUp lwn. onKeyDown

Semasa mencari perbezaan antara ketiga-tiga peristiwa ini, anda mungkin menghadapi salah tanggapan umum bahawa onKeyPress berlaku serentak dengan onKeyUp. Mari kita jelaskan kekeliruan ini dan jelaskan ciri unik setiap acara.

Garis Masa Acara

Dalam urutan acara input utama, kami mempunyai pecahan berikut:

1. onKeyDown: Dicetuskan apabila pengguna pada mulanya menekan a kekunci.
2. onKeyPress: Ditamatkan dan disyorkan untuk menggunakan onKeyDown sebaliknya. Peristiwa ini berlaku apabila pengguna menekan dan mengeluarkan kekunci, secara berkesan merupakan gabungan onKeyDown dan onKeyUp.
3. onKeyUp: Dicetuskan apabila pengguna melepaskan kekunci yang ditekan sebelum ini.

Analogi dengan Peristiwa Tetikus

Untuk memahami hubungan antara peristiwa penting ini, mari kita lukiskan analogi dengan rakan tetikus mereka:

• onKeyDown: Bersamaan dengan MouseDown
• onKeyPress: Setara dengan Klik (Kini ditamatkan dan digantikan dengan onKeyDown)
• onKeyUp: Setara dengan MouseUp

Pengecualian Pelayar: WebKit

keydown
keypress
textInput     
keyup

Demonstrasi Praktikal

Untuk menyaksikan peristiwa ini dalam tindakan, jalankan coretan kod berikut:

window.addEventListener("keyup", log);
window.addEventListener("keypress", log);
window.addEventListener("keydown", log);

function log(event){
  console.log( event.type );
}

Skrip ini log jenis acara ke konsol semasa anda berinteraksi dengan papan kekunci. Anda akan melihat urutan peristiwa yang berbeza semasa anda menekan dan melepaskan kekunci.

Atas ialah kandungan terperinci KeyDown, KeyPress, KeyUp: Apakah Perbezaannya dan Bila Anda Perlu Menggunakan Setiap Satu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!