事件委托无法直接用于focus/blur因二者不冒泡，可用focusin/focusout替代（IE9+支持）、MutationObserver动态绑定、捕获阶段监听（不推荐）或封装焦点代理函数实现统一管理。
事件委托依赖事件冒泡，而 focus 和 blur 默认不冒泡，因此无法直接用传统事件委托捕获。但实际开发中又常需对动态生成的表单元素统一管理聚焦/失焦行为——这时需要替代方案，核心思路是：绕过冒泡，改用捕获阶段或焦点代理机制。
使用 focusin / focusout 事件替代
这是最直接、兼容性好（IE9+，现代浏览器全支持）的方案。focusin 和 focusout 是 W3C 标准中专为解决 focus/blur 不冒泡问题设计的冒泡版替代事件：
- focusin 冒泡，等价于 focus + 冒泡能力；focusout 冒泡，等价于 blur + 冒泡能力
- 它们在目标元素获得/失去焦点时触发，并向上传播，可被父元素监听
- 注意：不要混用 focus/focusin 或 blur/focusout 在同一元素上，避免重复触发
示例：
document.getElementById('form-container').addEventListener('focusin', function(e) {
if (e.target.matches('input, textarea, select')) {
e.target.classList.add('focused');
}
});
document.getElementById('form-container').addEventListener('focusout', function(e) {
if (e.target.matches('input, textarea, select')) {
e.target.classList.remove('focused');
}
});
手动绑定 + 动态元素监听（适用于低版本或特殊场景）
当需兼容极老环境（如 IE8），或需更精细控制（例如只监听某类 input 的 blur），可结合 DOM 变化监听与主动绑定：
- 对已存在元素批量绑定 focus/blur
- 用 MutationObserver 监听新增表单控件，一旦插入，立即为其单独绑定事件
- 避免全局 document 监听，减少性能开销
关键点：不是“委托”，而是“按需补绑”，本质是模拟委托效果。
利用事件捕获阶段监听 focus/blur（有限适用）
focus 和 blur 虽不冒泡，但在捕获阶段仍可被捕获**（部分浏览器支持，但非标准保证）**。实践中不推荐作为主方案，仅作补充：
- 设置
addEventListener('focus', handler, true)可在捕获阶段捕获 focus - 但该行为在不同浏览器中一致性差（尤其 blur），且无法保证父元素一定能准确识别 target
- 更适合用于 document 级别轻量干预（如记录焦点路径），而非业务逻辑主流程
封装焦点代理函数（推荐工程化做法）
将焦点逻辑抽象为可复用函数，配合数据驱动更新，比强依赖 DOM 事件流更稳定：
- 维护一个焦点状态映射表（如 Map 或普通对象），key 为元素 ID 或 data-id
- 所有表单控件统一调用
handleFocus(el)/handleBlur(el)函数更新状态 - 函数内部同步样式、触发自定义事件、更新视图等，解耦 DOM 与业务逻辑
这样即使元素动态增删、事件不可委托，也能保持行为一致。
