JavaScript中的事件類型：常見的鍵盤與滑鼠事件

JavaScript 提供了廣泛的事件，讓您可以與網頁上的使用者操作互動並回應。在這些事件中，鍵盤和滑鼠事件是最常用的。在本文中，我們將了解 JavaScript 中不同類型的鍵盤和滑鼠事件，並查看如何使用它們的範例。

鍵盤事件

當使用者與鍵盤互動時，例如按下某個鍵、釋放某個鍵或鍵入字符，就會發生鍵盤事件。鍵盤事件讓我們可以做一些很酷的事情，例如檢查使用者是否在表單中正確輸入了某些內容，或者在按下特定鍵時發生某些操作。就好像網站正在監聽您按下的鍵並做出相應的反應。 鍵盤事件分為三種：

<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 事件的事件偵聽器已新增至該元素。點擊該元素時，將執行指定的功能。本例中的功能是將元素的背景顏色變更為藍色。

您还可以构建一个简单的游戏，用户可以通过使用 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，允许我们捕获并响应用户与鼠标的交互。

總之，JavaScript 的鍵盤和滑鼠事件使我們能夠透過捕捉按下的按鍵和滑鼠的移動來建立似乎正在監聽和響應用戶活動的網站。現在您已經了解了各種類型的鍵盤和滑鼠事件以及如何使用它們來建立互動式網站和 Web 應用程序，繼續建立有趣的互動式遊戲和網站。快樂編碼！

以上是JavaScript中的事件類型：常見的鍵盤與滑鼠事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！