推荐使用 focusin/focusout 事件，因其支持冒泡便于事件委托；focus/blur 不冒泡需直接绑定；focusin/focusout 可统一监听表单子元素聚焦/失焦，配合 tabindex 和 checkValidity 实现校验等逻辑。

可以通过 focus 和 blur 事件监听元素获取和失去焦点，现代开发中更推荐使用 focusin 和 focusout，因为它们支持事件冒泡，便于委托处理。

监听焦点获取（focus / focusin）

focus 事件不冒泡，只能直接绑定在目标元素上；focusin 会冒泡，适合父容器统一监听。

• 对单个输入框监听获取焦点：

input.addEventListener('focus', () => {
  console.log('获得焦点');
});

• 在表单容器内监听任意子元素聚焦（推荐）：

form.addEventListener('focusin', (e) => {
  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
    console.log(`${e.target.name} 被聚焦`);
  }
});

监听焦点失去（blur / focusout）

blur 同样不冒泡；focusout 支持冒泡，能捕获子元素失焦，且兼容性良好（IE9+）。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• 直接监听某个输入框失焦：

input.addEventListener('blur', () => {
  console.log('失去焦点');
});

• 用 focusout 统一处理表单校验：

form.addEventListener('focusout', (e) => {
  const field = e.target;
  if (field.checkValidity && !field.checkValidity()) {
    field.classList.add('invalid');
  }
});

注意焦点事件的触发时机与细节

焦点事件在用户交互（Tab 键、鼠标点击、element.focus() 调用）时触发，但不会因样式变化或 DOM 移动自动触发。

立即学习“Java免费学习笔记（深入）”；

• focus 和 blur 不支持事件委托；focusin/focusout 支持，但需确保父元素可聚焦（如设置 tabindex="-1"）
• 页面加载后首次自动聚焦的元素，会同步触发 focus 事件
• 用 JavaScript 主动调用 .focus() 时，若元素不可聚焦（如无 tabindex 且非原生表单控件），则事件不会触发

实用技巧：区分是键盘还是鼠标触发的聚焦

原生事件对象不直接提供触发方式信息，但可通过临时监听 mousedown 和 keydown 配合标志位判断：

let isMouseFocus = false;

document.addEventListener('mousedown', () => {
  isMouseFocus = true;
});

document.addEventListener('keydown', () => {
  isMouseFocus = false;
});

input.addEventListener('focus', () => {
  console.log(isMouseFocus ? '鼠标聚焦' : '键盘聚焦');
});