应优先缓存dom节点或精准绑定事件，用e.currenttarget替代重复queryselector；事件委托时e.currenttarget指代理容器，操作祖先元素需用e.target.closest()。

直接用 e.currentTarget 替代 document.querySelector，核心在于**事件绑定时确保目标元素就是你真正要操作的节点**，从而避免每次触发都重新遍历 DOM 查找。这不是语法替换，而是事件委托 + 精准绑定的思路转变。

把事件监听器直接绑在目标元素上

很多场景下，你本就清楚操作对象是谁，却习惯性写成：

document.addEventListener('click', e => {
  const btn = document.querySelector('#my-btn');
  if (btn && e.target === btn) {
    btn.classList.toggle('active');
  }
});

这会每次点击都执行一次全局查找。改成：

const btn = document.querySelector('#my-btn');
btn.addEventListener('click', e => {
  e.currentTarget.classList.toggle('active'); // e.currentTarget 就是 btn
});

✅ 仅初始化时查一次 DOM，后续所有点击都直接使用已缓存的引用。

用事件委托时，用 e.currentTarget 定位代理容器

当处理动态列表或复用组件时，常把事件绑在父容器上。此时 e.currentTarget 指向的是你绑定监听器的那个父元素，而 e.target 才是真正被点击的子元素。

如果你的操作逻辑是针对整个容器（比如展开/收起一个面板），就别再用 document.querySelector 去找这个容器了：

• ❌ 错误：在委托回调里反复查 document.querySelector('.panel')
• ✅ 正确：把监听器绑在 .panel 上，直接用 e.currentTarget 操作它本身
• ✅ 或者绑在更外层，但通过 e.target.closest('.panel') 获取目标（比全量 query 更轻量，且语义明确）

避免在事件回调中重复获取静态节点

如果某个元素在整个生命周期中不会被销毁或重写，就该把它提取到事件注册前：

const modal = document.querySelector('#user-modal');
const closeBtn = modal.querySelector('.close');

closeBtn.addEventListener('click', e => {
  // 直接用已获取的 modal 和 closeBtn，无需再次 query
  modal.classList.remove('show');
  e.currentTarget.blur(); // 当前按钮失焦
});

⚠️ 注意：e.currentTarget 在这里等价于 closeBtn，但更安全——它不依赖闭包变量，也不怕变量名拼错。

什么时候不能直接用 e.currentTarget？

e.currentTarget 总是指当前监听器所绑定的那个元素，不是你“想要”的任意元素。所以：

• 如果你需要操作的是 e.target 的某个祖先（比如点击表格行内图标，要高亮整行），那就得用 e.target.closest('tr')，而不是硬套 e.currentTarget
• 如果你监听的是 document，那 e.currentTarget 永远是 document，显然不能替代具体业务节点的查询
• 动态插入的新节点未重新绑定事件时，e.currentTarget 不会出现——这时需配合事件委托或 MutationObserver 初始化

关键不在“替换语法”，而在理清数据归属和生命周期。DOM 查询是开销，但真正的性能瓶颈往往来自滥用——把能缓存的不缓存，把能绑定近的绑太远，把能静态确定的偏要动态找。