focusin/focusout比focus/blur更适合焦点流转追踪，因其支持事件冒泡，可在父容器统一监听子元素焦点变化，避免重复绑定和捕获失败；现代浏览器原生支持，需注意动态插入元素的可聚焦性及边界场景处理。
focusin/focusout 为什么比 focus/blur 更适合做焦点流转追踪
因为 focus 和 blur 不冒泡，绑在父容器上根本收不到子元素的焦点变化；而 focusin 和 focusout 天然支持事件冒泡，一次监听就能覆盖整个表单或浮层内的所有可聚焦元素。
常见错误现象：在 form 上只监听 focus，结果什么也捕获不到；或者给每个 input 单独绑定，导致大量重复监听器、内存泄漏风险高。
- 现代浏览器（Chrome 58+、Firefox 52+、Safari 11.1+、Edge 79+）已原生支持，无需 polyfill
- IE 11 虽然支持但属于专有事件，若需兼容可加简单特征检测，但 2026 年多数项目已可忽略
- 注意：不能用
focusin替代.focus()—— 它只监听，不触发聚焦
如何用 focusin/focusout 搭建轻量级焦点流转链
核心是利用 event.target 和 event.relatedTarget 构建“从哪来 → 到哪去”的路径。尤其在在线编辑环境（如代码编辑器面板、表单构建器）中，这个链能还原用户真实的操作顺序。
实操建议：
- 在最外层容器（如
<div id="editor-area">）监听 <code>focusin和focusout -
focusin触发时记录event.target（当前获得焦点的元素），并缓存上一个焦点元素（可用document.activeElement或自维护变量） -
focusout触发时，用event.relatedTarget判断焦点是否移出容器：!container.contains(event.relatedTarget) - 避免在
focusout回调里立刻调用.focus()—— 可能触发同步重入，Chrome 会报Unable to preventDefault inside passive event listener
示例（精简版）：
const container = document.getElementById('editor-area');
let lastFocused = null;
container.addEventListener('focusin', (e) => {
if (e.target.matches('input, textarea, [contenteditable]')) {
console.log('→', e.target.dataset.fieldId || e.target.tagName, 'focused');
lastFocused = e.target;
}
});
container.addEventListener('focusout', (e) => {
if (!container.contains(e.relatedTarget)) {
console.log('← focus left container from', lastFocused?.dataset.fieldId);
}
});
动态插入内容后焦点流转中断怎么办
在线环境常通过 AJAX、innerHTML 或框架（如 React/Vue）动态渲染表单项，此时新插入的 input 在 DOM 就绪前无法被 focusin 捕获 —— 不是因为事件没绑，而是元素还没参与焦点流。
关键判断点：元素必须满足「可聚焦」条件，否则即使监听了也永远收不到它的 focusin。
- 确保新元素是原生可聚焦标签（
<input>、<textarea></textarea>）或带tabindex="0"的容器 - 避免用
tabindex="-1"—— 它支持.focus()，但不会触发focusin（除非手动调用） - 插入后不要立即监听，改用
requestAnimationFrame确保浏览器完成布局和焦点注册 - Shadow DOM 内部需先确认
shadowRoot已挂载，再查子节点并确保其可聚焦
错误写法：el.innerHTML = '<input type="text">'; el.querySelector('input').addEventListener('focusin', ...); —— 此时 focusin 还未被浏览器识别为有效事件源。
容易被忽略的边界情况
焦点流转不是简单的“进→出”线性过程。在线编辑场景下，以下情况高频出现且极易漏处理：
- 用户用鼠标点击非表单区域（如 label、div）再跳转到 input —— 此时
focusin仍会触发，但event.relatedTarget是null，需 fallback 到document.activeElement - 表单内含
iframe（如富文本编辑器），其内部焦点变化不会冒泡到外层，需单独监听 iframe 的focusin（通过contentDocument） - 移动端触摸聚焦可能伴随
mousedown+focus两次触发，focusin仍是唯一可靠入口 - 关闭浮层/弹窗后，焦点未归还到触发元素，导致后续 Tab 导航断连 —— 这不是事件监听问题，而是状态管理缺失
真正难的不是捕获单次事件，而是把零散的 focusin/focusout 与 mousedown、keydown、scroll 信号对齐时间戳，拼出一条可信的行为链。少一个环节，流转分析就失真。
