JavaScript 聚焦：focus/blur 事件详解

在 JavaScript 中，focus 和 blur 事件是处理元素聚焦和失焦的重要工具。这些事件在表单验证、用户交互跟踪和可访问性等方面非常有用。

基本概念

• focus：当元素获得焦点时触发（如点击 input 或 tab 键导航到元素）
• blur：当元素失去焦点时触发（如点击其他地方或 tab 键离开元素）

使用方法

事件监听

const input = document.querySelector('input');

// 添加 focus 事件监听
input.addEventListener('focus', function() {
  console.log('输入框获得焦点');
  this.style.borderColor = 'blue';
});

// 添加 blur 事件监听
input.addEventListener('blur', function() {
  console.log('输入框失去焦点');
  this.style.borderColor = '';
  
  // 简单的验证示例
  if(this.value.length < 3) {
    this.style.borderColor = 'red';
  }
});

直接属性赋值

const input = document.querySelector('input');

input.onfocus = function() {
  console.log('获得焦点 - 旧式方法');
};

input.onblur = function() {
  console.log('失去焦点 - 旧式方法');
};

相关方法和属性

focus() 和 blur() 方法

可以主动触发元素的聚焦或失焦：

document.getElementById('myInput').focus(); // 聚焦到元素
document.getElementById('myInput').blur(); // 使元素失焦

document.activeElement

获取当前获得焦点的元素：

console.log(document.activeElement); // 输出当前聚焦的元素

事件冒泡

focus 和 blur 事件不冒泡，但可以使用 focusin 和 focusout 作为替代：

// focusin 和 focusout 会冒泡
document.addEventListener('focusin', function(event) {
  console.log('有元素获得焦点:', event.target);
});

document.addEventListener('focusout', function(event) {
  console.log('有元素失去焦点:', event.target);
});

实际应用示例

表单验证

const emailInput = document.getElementById('email');

emailInput.addEventListener('blur', function() {
  const email = this.value;
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  
  if(!emailRegex.test(email)) {
    this.classList.add('invalid');
    showError('请输入有效的电子邮件地址');
  } else {
    this.classList.remove('invalid');
    hideError();
  }
});

动态UI效果

const searchBox = document.querySelector('.search-box');
const searchInput = searchBox.querySelector('input');

searchInput.addEventListener('focus', function() {
  searchBox.classList.add('focused');
  searchBox.style.width = '300px';
});

searchInput.addEventListener('blur', function() {
  searchBox.classList.remove('focused');
  searchBox.style.width = '200px';
});

注意事项

1. 某些元素（如 div、span）默认不可聚焦，除非设置 tabindex 属性
2. 在移动设备上，聚焦行为可能与桌面不同
3. 过度使用聚焦/失焦事件可能会影响用户体验
4. 对于复杂的表单，考虑使用 change 或 input 事件结合使用

这些事件是创建交互式网页的基础，合理使用可以显著提升用户体验。