JavaScript 中事件捕获与冒泡怎么在 shadow inner 节点向外冒泡时重定向 target-js教程-PHP中文网

shadow dom 中事件的 event.target 默认被重定向为 shadow host 以实现边界隔离；原始触发节点可通过 event.composedpath()[0] 获取，或通过自定义事件携带 originaltarget 透传。

javascript 中事件捕获与冒泡怎么在 shadow inner 节点向外冒泡时重定向 target

在 Shadow DOM 中，事件从 shadow inner 节点向外传播时，默认会进行**重定向（retargeting）**：即事件的 event.target 会被自动改为 shadow host（即封装该 Shadow Root 的元素），而非原始触发节点。这是 Shadow DOM 的封装机制决定的，目的是隐藏内部实现细节。

为什么 target 会被重定向？

Shadow DOM 的设计原则之一是“边界隔离”。当事件穿过 shadow boundary 向外冒泡时，浏览器会将 event.target 替换为 shadow host，以避免外部代码意外访问或依赖内部节点。例如：

假设你有：

  #shadow-root>

点击 <button></button> 后，在 host 元素（<my-component></my-component>）上监听的事件中，event.target 是 <my-component></my-component>，不是 <button></button> —— 这就是重定向。

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

如何获取原始触发节点（inner target）？

虽然 event.target 被重定向了，但你可以通过以下方式拿到原始目标：

event.composedPath()[0]：返回事件路径中最深的节点（即原始触发节点），即使它在 shadow inner 中。这是最常用、最可靠的方式。
event.path?.[0]（非标准，仅部分浏览器支持，不推荐）
若事件是 composed: true（默认），且你在 shadow host 上监听，则 composedPath() 始终包含完整路径，包括 shadow 内部节点。

如何在冒泡过程中“恢复”或透传原始 target 信息？

你不能阻止浏览器的自动重定向（这是规范行为），但可以在事件处理中主动保留/暴露原始信息：

在 shadow root 内部手动派发一个自定义事件，并显式携带原始 target 或 detail：

// 在 shadow root 内
this.querySelector('button').addEventListener('click', e => {
  this.dispatchEvent(new CustomEvent('inner-click', {
    bubbles: true,
    composed: true,
    detail: { originalTarget: e.target }
  }));
});

这样外部监听 inner-click 时，可通过 e.detail.originalTarget 获取原始按钮，且不受重定向影响。

利用 event.composedPath() 实时推断原始来源（适合通用封装逻辑）：

host.addEventListener('click', e => {
  const innerTarget = e.composedPath()[0];
  if (innerTarget.matches('.action-button')) {
    // 处理特定内部按钮逻辑
  }
});