Rumah > Artikel > hujung hadapan web > Jenis Acara dalam JavaScript: Papan Kekunci Biasa dan Acara Tetikus
JavaScript menyediakan pelbagai acara yang membolehkan anda berinteraksi dan bertindak balas terhadap tindakan pengguna di halaman web. Antara acara ini, acara papan kekunci dan tetikus adalah yang paling biasa digunakan. Dalam artikel ini, kita akan melihat pelbagai jenis acara papan kekunci dan tetikus dalam JavaScript dan melihat contoh cara menggunakannya.
Acara papan kekunci berlaku apabila pengguna berinteraksi dengan papan kekunci, seperti menekan kekunci, melepaskan kekunci atau menaip aksara. Acara papan kekunci membolehkan kami melakukan beberapa perkara yang menarik, seperti menyemak sama ada pengguna memasukkan sesuatu dengan betul ke dalam borang atau sesuatu berlaku apabila kekunci tertentu ditekan. Seolah-olah laman web itu mendengar kekunci yang anda tekan dan bertindak balas dengan sewajarnya. Acara papan kekunci terbahagi kepada tiga jenis:
<strong>keydown</strong>
acara<strong>keydown</strong>
事件
当用户按下某个键时会触发此键盘事件。如果用户按住某个键,则会重复触发。
document.addEventListener('keydown', function(event) { console.log('Key pressed is:', event.key); });
此代码演示了 keydown
事件的工作原理。它向文档对象的 keydown
事件添加一个事件侦听器。当按下键盘上的某个键时,将执行指定的功能。此函数将消息记录到控制台。该消息包含字符串 Key Pressed is:,后跟 event.key
的值,该值表示按下的键。
keyup
事件释放按键时会发生此键盘事件。它可用于检测用户何时释放特定键。
document.addEventListener('keyup', (event) => { var name = event.key; alert(`Key pressed: ${name}`); }, false);
上面的代码为 keyup
事件添加了一个事件监听器,这样当键盘上松开某个键时,就会执行一个箭头功能。该箭头函数将 event.key
的值赋给名为 name
的变量,它代表释放的密钥。释放按键时会出现一个警告框,并显示一条消息,其中包含字符串 Key Pressed:,后跟使用字符串插值的 name
变量的值 (${name}
)。
可用于演示 keyup
事件的另一个示例是设置一个输入字段并创建一个函数,当用户释放按键时,该函数将输入字段中键入的字符转换为大写。要尝试下面的示例,请创建一个 id 为 fname
的输入标记和一个类似 onkeyup="myFunction()"
在输入标记内。
function myFunction() { let x = document.getElementById("fname"); x.value = x.value.toUpperCase(); }
<strong>keypress</strong>
事件按下某个键时会触发 keypress
事件。在下面的代码示例中,事件侦听器被添加到文档对象中,该事件侦听器在按下按键并生成字符值时执行函数。箭头函数将一条消息记录到浏览器的控制台,其中包含字符串 Key Pressed:,后跟 event.key
的值,该值表示按下的键的字符值。 p>
document.addEventListener('keypress', (event) => { console.log('Key pressed:', event.key); });警告 某些浏览器不再支持按键事件,并且并非所有浏览器中的所有键(例如 Alt、Control、Shift 或 Esc)都会触发该事件。建议改用 keydown 或 keyup 事件。
另一方面,鼠标事件可以帮助您创建更具吸引力的网站。它们处理鼠标与 HTML 文档交互时发生的事件,例如单击、移动或滚动。它们使我们能够在用户单击鼠标按钮、将鼠标移动到元素上或在屏幕上拖动项目时做出反应。就好像网站正在跟踪您的鼠标移动和点击来弄清楚您想要做什么。鼠标事件有多种类型:
<strong>点击</strong>
事件当用户单击某个元素时执行此事件。
var element = document.querySelector('.btn'); element.addEventListener('click', function () { element.style.backgroundColor = 'blue'; });
要执行上述代码,请在 HTML 中创建一个 CSS 类名称为 btn
的按钮。上面的代码使用 querySelector
方法选择 CSS 类名为 btn
的元素,并将其分配给 element
变量。侦听 click
Acara papan kekunci ini dicetuskan apabila pengguna menekan kekunci. Jika pengguna menahan kekunci, ia akan menyala berulang kali.
var button = document.querySelector('.btn'); button.addEventListener('dblclick', function (event) { alert('Button double-clicked!'); button.style.fontSize = '40px'; });🎜Kod ini menunjukkan cara acara
keydown
berfungsi. Ia menambahkan pendengar acara pada acara keydown
objek dokumen. Apabila kekunci pada papan kekunci ditekan, fungsi yang ditentukan dilakukan. Fungsi ini log mesej ke konsol. Mesej mengandungi rentetan Kekunci Ditekan ialah:, diikuti dengan nilai event.key
, yang mewakili kekunci yang ditekan. 🎜
keyup
acaravar button = document.getElementById('text'); button.addEventListener('mousedown', function (event) { alert('Mouse button pressed!'); });🎜Kod di atas menambah pendengar acara untuk acara
keyup
supaya apabila kekunci dilepaskan pada papan kekunci, fungsi anak panah akan dilakukan. Fungsi anak panah memberikan nilai event.key
kepada pembolehubah bernama name
, yang mewakili kunci yang dikeluarkan. Apabila kunci dilepaskan, kotak amaran muncul dengan mesej yang mengandungi rentetan Kekunci Ditekan:, diikuti dengan nilai pembolehubah $ {name}
). 🎜
🎜Contoh lain yang boleh digunakan untuk menunjukkan acara keyup
ialah menyediakan medan input dan mencipta fungsi yang menukar aksara yang ditaip dalam medan input kepada huruf besar apabila pengguna melepaskan kekunci. Untuk mencuba contoh di bawah, buat teg input dengan id fname
dan teg input seperti onkeyup="myFunction()"
var button = document.getElementById('text'); button.addEventListener('mouseup', function (event) { alert('Mouse button released!'); });
<strong>tekanan kekunci</strong>
acarakeypress
dicetuskan apabila kekunci ditekan. Dalam contoh kod berikut, pendengar acara ditambahkan pada objek dokumen yang melaksanakan fungsi apabila kekunci ditekan dan menjana nilai aksara. Fungsi anak panah mencatatkan mesej ke konsol penyemak imbas yang mengandungi rentetan Kekunci Ditekan:, diikuti dengan nilai event.key
yang mewakili nilai aksara yang ditekan. Atas ialah kandungan terperinci Jenis Acara dalam JavaScript: Papan Kekunci Biasa dan Acara Tetikus. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!