在 javascript 事件委托中，无法直接通过 addeventlistener 将 focus 和 blur 事件委托给父元素，因为这两个事件不会冒泡。正确的做法是改用会冒泡的焦点相关事件：focusin 替代 focus，用 focusout 替代 blur。只需在父容器上监听 focusin 和 focusout，并在回调中通过 event.target 判断触发事件的元素是否符合选择器条件即可。
为什么 focus 和 blur 不能用于事件委托
DOM 标准规定 focus 和 blur 事件不冒泡，这意味着如果在子元素上触发它们，父级绑定的监听器根本收不到通知。因此，试图在父节点上使用 addEventListener('focus', ...) 来捕获内部输入框的聚焦行为是无效的。开发者常误以为所有事件都能像点击那样向上冒泡，从而在这些场景下遇到“监听失效”的问题。
const parent = document.getElementById('form-container');
// 错误写法：focus 不冒泡，父级无法捕获
parent.addEventListener('focus', (e) => {
console.log('Focused:', e.target); // 不会执行
});
// 正确写法：使用 focusin 替代 focus
parent.addEventListener('focusin', (e) => {
if (e.target.matches('input')) {
console.log('Input focused:', e.target);
}
});
// 正确写法：使用 focusout 替代 blur
parent.addEventListener('focusout', (e) => {
if (e.target.matches('input')) {
console.log('Input blurred:', e.target);
}
});
如何区分当前聚焦元素与失去焦点元素
在使用 focusin 和 focusout 时，可以通过 event.relatedTarget 属性获取焦点转移的前后关系。在 focusin 事件中，relatedTarget 表示之前拥有焦点的元素；在 focusout 事件中，它表示即将获得焦点的新元素。利用这一特性，可以精确判断用户是在表单内部切换输入框，还是完全离开了表单区域，从而实现更复杂的交互逻辑，例如仅在离开整个表单时验证数据。
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
立即学习“Java免费学习笔记（深入）”；
const form = document.getElementById('my-form');
form.addEventListener('focusin', (e) => {
const prevFocus = e.relatedTarget;
console.log(`Focus moved to ${e.target.id} from ${prevFocus ? prevFocus.id : 'none'}`);
});
form.addEventListener('focusout', (e) => {
const nextFocus = e.relatedTarget;
// 如果 nextFocus 为 null，说明焦点移出了文档（如切换到其他应用）
if (!nextFocus) {
console.log('Focus left the document entirely');
} else {
console.log(`Focus moved to ${nextFocus.id}`);
}
});
基于 event.relatedTarget 的具体问题
当焦点从表单内的一个输入框转移到另一个输入框时，focusout 事件的 relatedTarget 指向目标输入框，而 focusin 事件的 relatedTarget 指向源输入框。如果焦点移出表单外部（例如点击浏览器地址栏），relatedTarget 将为 null。这一行为允许我们区分“内部导航”和“外部离开”，从而在需要时触发不同的业务逻辑，比如只在真正离开页面或应用时才保存草稿。
