資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究解釋 JavaScript 中的焦點事件
可以透過焦點事件確定網頁上專案的焦點，我們將在本文中瞭解這些事件。
JavaScript 中的焦點事件是指當 HTML 元素獲得或失去焦點時觸發的眾多瀏覽器提供的事件。這些事件可以在多種上下文中使用，例如響應使用者操作，例如點選輸入欄位。藉助焦點事件，我們可以跟蹤網頁元素何時獲得或失去焦點。
JavaScript 中有三個主要的焦點事件：
focus - 當元素獲得焦點時觸發此事件，例如點選元素或使用 Tab 鍵切換到該元素。
blur - 此事件與 focus 事件相反。當元素失去焦點時觸發此事件，例如點選元素外部或使用 Tab 鍵離開該元素。
focusin - 此事件類似於 focus 事件，但它也可以冒泡到 DOM 樹。
focusout - 此事件類似於 blur 事件，但它也可以冒泡到 DOM 樹。
讓我們透過一些示例來了解上述概念。
示例 1
使用 addEventListener 文件方法，我們將構造一個具有 id 為“name”的輸入欄位，併為其新增 focus 和 blur 事件的多個事件偵聽器。當輸入欄位獲得焦點時，focus 事件偵聽器將訊息記錄到控制檯，當它失去焦點時，blur 事件偵聽器將訊息記錄到控制檯。
檔名：index.html
<!DOCTYPE html>
<html>
<head>
<title>Explain focus events in JavaScript.</title>
</head>
<body>
<label for="name">Name:</label>
<input type="text" id="name" />
<script>
const nameInput = document.getElementById('name');
nameInput.addEventListener('focus', function() {
console.log('Input field has gained focus.');
});
nameInput.addEventListener('blur', function() {
console.log('Input field has lost focus.');
});
</script>
</body>
</html>
輸出
輸出將如下所示：
示例 2
在上面的示例中，我們將建立一個具有 id 為“name”的輸入欄位，並使用 addEventListener 文件方法為其新增 focusin 和 focusout 事件的不同事件偵聽器。當輸入欄位獲得焦點時，focusin 事件偵聽器將訊息記錄到控制檯，當它失去焦點時，focusout 事件偵聽器將訊息記錄到控制檯。
檔名：index.html
<!DOCTYPE html>
<html>
<head>
<title>Explain focus events in JavaScript.</title>
</head>
<body>
<label for="name">Name:</label>
<input type="text" id="name" />
<script>
const nameInput = document.getElementById('name');
nameInput.addEventListener('focusin', function() {
console.log('focusin event fired.');
});
nameInput.addEventListener('focusout', function() {
console.log('focusout event fired.');
});
</script>
</body>
</html>
輸出
輸出將如下所示：
結論
JavaScript 的焦點事件是一項很棒的功能，它可以讓我們知道某個元素何時獲得了或失去了焦點。透過利用頁面中存在的各種焦點事件，我們可以開發各種功能，例如響應使用者互動、驗證使用者輸入、根據使用者行為啟動操作或提供視覺反饋。我們學習了 JavaScript 中焦點事件的概念，並透過一些示例進行了說明。
896 次瀏覽
