在JavaScript中,焦點事件主要涉及到元素獲得或失去焦點的情況。這些事件包括focus
和blur
。以下是如何使用這些事件處理程序的示例:
focus
事件:當元素獲得焦點時,會觸發focus
事件。例如,當用戶點擊一個輸入框或使用Tab鍵導航到某個元素時,該元素就會獲得焦點。你可以使用addEventListener
方法為元素添加focus
事件監聽器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Focus Event Example</title>
</head>
<body>
<input type="text" id="myInput" placeholder="Click me to focus">
<script>
const inputElement = document.getElementById('myInput');
inputElement.addEventListener('focus', () => {
console.log('Input element is now focused');
});
</script>
</body>
</html>
blur
事件:當元素失去焦點時,會觸發blur
事件。例如,當用戶點擊頁面的其他部分或使用Tab鍵導航到另一個元素時,當前元素就會失去焦點。你可以使用addEventListener
方法為元素添加blur
事件監聽器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blur Event Example</title>
</head>
<body>
<input type="text" id="myInput" placeholder="Click me to focus">
<script>
const inputElement = document.getElementById('myInput');
inputElement.addEventListener('blur', () => {
console.log('Input element has lost focus');
});
</script>
</body>
</html>
注意:focus
和blur
事件不會冒泡,也就是說,它們不會像其他事件那樣傳遞給父元素。如果你需要在子元素上處理這些事件,你需要直接將事件監聽器添加到子元素上。