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

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()" < 的函数/strong>在输入标记内。

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 变量。侦听 clickAcara 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 acara

🎜Acara papan kekunci ini berlaku apabila kunci dilepaskan. Ia boleh digunakan untuk mengesan apabila pengguna mengeluarkan kunci tertentu. 🎜

var 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 nama menggunakan interpolasi rentetan ( $ {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()" dalam teg input. 🎜

var button = document.getElementById('text');
button.addEventListener('mouseup', function (event) {
  alert('Mouse button released!');
});

<strong>tekanan kekunci</strong> acara

🎜Peristiwa keypress 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. p> rrreee 🎜 memberi amaran Sesetengah penyemak imbas tidak lagi menyokong acara utama dan bukan semua kekunci (seperti Alt, Control, Shift atau Esc) mencetuskan acara dalam semua penyemak imbas. Adalah disyorkan untuk menggunakan acara keydown atau keyup.

Contoh menggunakan acara papan kekunci

Acara tetikus🎜 🎜 Sebaliknya, acara tetikus boleh membantu anda membuat tapak web yang lebih menarik. Mereka 🎜 mengendalikan acara 🎜 yang berlaku apabila tetikus berinteraksi dengan dokumen HTML, seperti mengklik, menggerakkan atau menatal. Mereka membenarkan kami bertindak balas apabila pengguna mengklik butang tetikus, menggerakkan tetikus ke atas elemen atau menyeret item pada skrin. Seolah-olah laman web itu menjejaki pergerakan tetikus anda dan klik untuk mengetahui apa yang anda mahu lakukan. Terdapat banyak jenis acara tetikus: 🎜

<strong>Acara Klik</strong>

🎜Acara ini dilaksanakan apabila 🎜pengguna mengklik pada elemen. 🎜🎜 rrreee 🎜Untuk melaksanakan kod di atas, buat butang dalam HTML dengan nama kelas CSS btn. Kod di atas memilih elemen dengan nama kelas CSS btn menggunakan kaedah querySelector dan memberikannya kepada pembolehubah elemen. Pendengar acara yang mendengar acara klik telah ditambahkan pada elemen. Apabila elemen ini diklik, fungsi yang ditentukan akan dilakukan. Fungsi dalam contoh ini adalah untuk menukar warna latar belakang elemen kepada biru. 🎜

您还可以构建一个简单的游戏，用户可以通过使用 math.floor 和 math.random 方法生成随机颜色，在框内单击以连续更改框的背景颜色。

<strong>dbclick</strong> 事件

当用户用鼠标双击某个元素时，此事件调用一个函数。要执行下面的代码示例，请在 HTML 中创建一个 CSS 类名称为 btn 的按钮。使用 querySelector 方法获取元素并向其添加事件侦听器。双击该按钮时，将调用该函数，显示一条警报消息，并且按钮中文本的字体大小会增加。

var button = document.querySelector('.btn');
button.addEventListener('dblclick', function (event) {
  alert('Button double-clicked!');
  button.style.fontSize = '40px';
});

使用 dbclick 事件的高级方法是使用户能够编辑内容。例如，双击文本元素可以将其转换为可编辑的输入字段，允许用户直接进行更改。下面是使用 dbclick 事件编辑内容的演示。

<strong>mouseup</strong> 和 <strong>mousedown</strong> 事件

当用户将光标悬停在某个元素上并按下鼠标按钮时，会触发此 mousedown 事件。 创建一个 id 为 text 的按钮。当用鼠标单击该按钮时，会触发消息：“鼠标按钮已按下”。

var button = document.getElementById('text');
button.addEventListener('mousedown', function (event) {
  alert('Mouse button pressed!');
});

当用户单击某个元素后释放鼠标按钮时，会触发 mouseup 事件。创建一个 id 为 text 的按钮。当用鼠标单击按钮并释放时，会触发消息：“鼠标按钮已释放”。

var button = document.getElementById('text');
button.addEventListener('mouseup', function (event) {
  alert('Mouse button released!');
});

如何使用这些 mouseup 和 mousedown 事件的实际示例是在实现拖放功能以及绘图和草图时。

<strong>mouseover</strong> 和 <strong>mouseout</strong> 事件

当鼠标指针悬停在某个元素上时，会发生 mouseover 事件，而当鼠标指针离开该元素时，会发生 mouseout 事件。这是这两个鼠标事件的快速演示。

在上面的演示中，当用户的鼠标经过图像时，图像会放大，当鼠标离开图像时，图像会恢复到正常大小。

mouseover 事件可用于创建一个工具提示，当鼠标悬停在元素上时，该提示提供有关该元素的附加信息。 mouseover 和 mouseout 事件还可用于创建交互式导航菜单，其中当用户的鼠标指针悬停在菜单项上时会出现子菜单。

<strong>mousemove</strong> 和 <strong>mouseleave</strong> 事件

当用户将鼠标光标移动到某个元素上时，会触发 mousemove 事件，当鼠标光标离开该元素时，会触发 mouseleave 事件。这些事件使开发人员能够监视鼠标移动。

每当用户的鼠标位于 div 容器内时，上述代码都会获取鼠标指针坐标，并将坐标显示为框下方的文本。然后，在用户鼠标离开 div 元素后，它会显示文本，指示指针已离开 div。

结论

诸如 keydown、keyup 和 keypress 之类的键盘事件允许我们捕获并响应来自键盘的用户输入。无论您是实现表单验证、提供键盘快捷键还是创建基于文本的游戏，键盘事件对于用户交互都是至关重要的。另一方面，鼠标事件，如click、dblclick、mousedown、mouseup、mouseover、mouseout、mousemovephpcn endcphpcn 和 <code>mouseleave，允许我们捕获并响应用户与鼠标的交互。

Ringkasnya, acara papan kekunci dan tetikus JavaScript membolehkan kami membina tapak web yang kelihatan seperti mendengar dan bertindak balas kepada aktiviti pengguna dengan menangkap penekanan kekunci dan pergerakan tetikus. Kini setelah anda memahami pelbagai jenis acara papan kekunci dan tetikus serta cara menggunakannya untuk membina tapak web dan aplikasi web interaktif, teruskan dan bina permainan dan tapak web interaktif yang menyeronokkan. Selamat mengekod!

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!