JavaScript中事件机制中焦点事件blur和focus怎么利用捕获模式实现事件代理-js教程-PHP中文网

blur 和 focus 事件不支持事件捕获且不冒泡，因此无法通过事件代理在父元素监听；替代方案是使用冒泡的 focusin/focusout 事件，它们兼容性好且支持事件代理。

javascript中事件机制中焦点事件blur和focus怎么利用捕获模式实现事件代理

blur 和 focus 事件**不支持事件捕获模式**，也无法通过标准的事件代理（event delegation）在父元素上监听子元素的 blur/focus，因为这两个事件**默认不冒泡**（bubbling phase 为 false），且没有捕获阶段的行为。

为什么 focus/blur 不能用 capture 实现代理

根据 DOM 规范：

focus 和 blur 是非冒泡事件（bubbles: false），因此不会触发父元素的事件监听器（无论 capture 还是 bubble 阶段）；
尽管你可以对它们调用 addEventListener("focus", handler, true)，但浏览器会**忽略 capture 参数**，实际等同于 false —— 即只在目标阶段触发，且仅限直接绑定的目标元素；
尝试在父容器上监听子 input 的 focus，不会被触发，即使用了 true；

替代方案：focusin / focusout

现代浏览器支持两个**冒泡版焦点事件**：focusin 和 focusout。它们行为与 focus/blur 几乎一致，但关键区别是：它们会冒泡，因此可以用于事件代理。

focusin 在元素获得焦点时触发（冒泡），相当于可代理的 focus；
focusout 在元素失去焦点时触发（冒泡），相当于可代理的 blur；
它们兼容性良好（Chrome 5+, Firefox 52+, Edge, Safari 5.1+）；

示例：在表单上代理所有 input 的焦点行为

OpenJDK 24

下载

document.querySelector('form').addEventListener('focusin', (e) => {
  if (e.target.matches('input, select, textarea')) {
    e.target.classList.add('focused');
  }
});

document.querySelector('form').addEventListener('focusout', (e) => {
  if (e.target.matches('input, select, textarea')) {
    e.target.classList.remove('focused');
  }
});

注意 focusin/focusout 的特殊行为

这两个事件虽然冒泡，但有两点需留意：

它们**不支持 capture 阶段的“提前拦截”意义**——即使你写 addEventListener('focusin', h, true)，它仍只在冒泡阶段触发（因为规范定义 focusin/focusout 只有冒泡阶段）；
它们会在焦点从一个子元素转移到另一个子元素时触发两次（如从 input1 → input2，先 focusout input1，再 focusin input2），这点和原生 focus/blur 一致；
它们能正确响应 tab 键、click、API（.focus()）等所有焦点来源；