JavaScript 中 focusin 和 focusout 事件怎么利用冒泡特性监听表单焦点变化-js教程-PHP中文网

focusin/focusout因支持事件冒泡，可在表单容器统一监听子元素焦点变化，避免为每个控件重复绑定；而focus/blur不冒泡，只能在目标元素自身监听，无法实现容器级焦点管理。

javascript 中 focusin 和 focusout 事件怎么利用冒泡特性监听表单焦点变化

focusin 和 focusout 事件天生支持冒泡，这让你可以在表单容器（如 <form></form> 或 <div class="form-group">）上统一监听内部所有可聚焦元素的焦点进入与离开，无需为每个输入框单独绑定事件。 <h3>为什么不用 focus/blur？</h3> <p>原生 <code>focus 和 blur 事件不冒泡，只能在目标元素自身监听；而 focusin 和 focusout 是 W3C 标准事件，行为与之对应但支持冒泡，是替代方案的可靠选择。

在表单容器上监听焦点进出

给整个表单加一个事件监听器，就能捕获任意子元素获得或失去焦点的时刻：

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

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

form.addEventListener('focusin', (e) => {
  if (e.target.matches('input, select, textarea, button')) {
    console.log('焦点进入：', e.target.name || e.target.type);
  }
});

form.addEventListener('focusout', (e) => {
  if (e.target.matches('input, select, textarea, button')) {
    console.log('焦点离开：', e.target.name || e.target.type);
  }
});

注意：e.target 始终是实际获得/失去焦点的元素（比如某个 input），不是你绑定事件的 form
用 e.target.matches() 过滤掉非控件元素（如 label、span），避免误触发
即使动态插入新输入框，也不需重新绑定——冒泡机制天然支持

区分“真正离开表单”和“在表单内切换”

focusout 触发时，焦点可能只是移到了同一表单内的另一个输入框。要判断是否彻底离开表单，可用 event.relatedTarget：

form.addEventListener('focusout', (e) => {
  const isLeavingForm = !form.contains(e.relatedTarget);
  if (isLeavingForm && e.target.matches('input, select, textarea')) {
    console.log('焦点已完全离开表单');
  }
});