currenttarget的核心价值是精准锚定事件绑定的容器本身，避免层层查找父级；它在事件委托中恒指外壳元素，可直接查子节点、读dataset状态、分层隔离嵌套选项卡，并简化classlist操作。
在复杂选项卡切换中，currentTarget 的核心价值不是“替代 target”，而是帮你精准锚定事件绑定的**容器本身**，从而避免层层向上找父级、反复写 closest() 或 parentNode，大幅压平 DOM 查询层级。
用 currentTarget 直接作为操作上下文
当事件委托绑定在选项卡外壳（如 .tab-container）上时，event.currentTarget 永远指向这个外壳元素——它不随点击位置变化，也不受子元素干扰。这意味着你可以直接基于它查子节点，无需从触发元素反推：
- ✅ 正确：
const activeTab = e.currentTarget.querySelector('.tab.active'); - ❌ 冗余：
const container = e.target.closest('.tab-container'); const activeTab = container?.querySelector('.tab.active');
配合 dataset 实现免遍历的状态映射
在外壳元素上提前存好关键状态（如当前激活项索引、主题模式），点击时直接读取，跳过 DOM 查找逻辑：
- HTML 中设置：
<div class="tab-container" data-active-index="1" data-theme="dark"> <li>JS 中使用：<code>const index = parseInt(e.currentTarget.dataset.activeIndex); - 后续切换只需：
e.currentTarget.querySelectorAll('.tab')[index].classList.remove('active'); - 不用写
if (e.target.matches('.sidebar-tab')) {...}做分支判断 - 也不用在 handler 里反复
closest('.sidebar-tabs')或closest('.main-tabs') - 每个容器的 handler 只处理自己内部结构，代码更专注、可复用性更高
- 例如切换标签页时同步更新对应面板：
e.currentTarget.querySelectorAll('.panel').forEach((p, i) => p.classList.toggle('show', i === targetIndex)); - 所有操作都在同一 DOM 层级完成，无跨层查找，也无需临时变量存父容器引用
嵌套选项卡中分层锁定，避免污染全局
若页面有多个独立选项卡区域（如侧边面板 + 主内容区），每个都应独立绑定事件并依赖自己的 currentTarget。这样各区域逻辑完全隔离：
与 classList 切换配合，消除冗余选择器
利用 currentTarget 作为根节点调用 querySelectorAll 后，再结合 forEach 和 classList.toggle/replace，能写出极简的状态同步逻辑：
