推荐使用 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+）。

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

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

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 移动自动触发。

• 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 ? '鼠标聚焦' : '键盘聚焦');
});

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南