如何通过 Element.closest 快速查找符合 CSS 选择器的最近祖先节点来完成逻辑委派

Element.closest 从当前元素自身开始向上查找第一个匹配 CSS 选择器的祖先元素（含自身），匹配即返回该元素，无匹配则返回 null；不跨 Shadow DOM、不匹配非元素节点、需合法 CSS 选择器。

Element.closest 是现代 DOM 操作中实现逻辑委派（事件委托）的高效手段之一，它能直接从当前元素出发，向上查找**第一个匹配指定 CSS 选择器的祖先元素（含自身）**，无需手动遍历父节点，代码简洁、语义清晰、性能良好。

理解 closest 的行为边界

它从调用元素自身开始检查，逐级向上（包括自己 → parent → parent.parent…），直到 document 根节点为止。一旦匹配成功就立即返回该元素；若全程无匹配，则返回 null。注意：
- 不会跨 Shadow DOM 边界（除非在影子根内调用）
- 不匹配 text node、comment node 等非元素节点
- 选择器必须是合法的 CSS 选择器（支持类名、ID、属性、伪类如 :disabled，但不支持伪元素）

在事件委托中替代繁琐的 parentNode 遍历

传统事件委托常需写循环判断 event.target.parentNode 是否匹配，而 closest 可一行解决：

• 给容器绑定事件（如 ul#list），监听子项点击
• 在事件回调中用 event.target.closest('li.item') 获取真正被点中的目标项（即使用户点的是 li 内的 span 或 button）
• 避免为每个子元素单独绑定事件，节省内存与初始化开销

常见实用场景与写法示例

✅ 查找带特定 class 的操作按钮所属卡片
const card = event.target.closest('.card');
→ 无论点的是 card 内的 .btn-delete、.title 还是空白处，只要在 card 范围内就命中

✅ 结合 data 属性做行为分发

const actionBtn = event.target.closest('[data-action]');<br>if (actionBtn) { handleAction(actionBtn.dataset.action); }

✅ 安全校验是否在某个业务区域内部
if (!event.target.closest('.editor-container')) return;
→ 快速过滤掉编辑器区域外的误触

注意事项与兼容性提醒

closest 在 IE 中完全不支持，如需兼容 IE11，可用 polyfill 或降级为手动遍历（推荐使用 官方推荐 polyfill）。现代项目（Chrome 41+/Firefox 35+/Safari 9.1+）可放心使用。另外，避免在高频触发事件（如 mousemove）中频繁调用 closest，必要时缓存结果或节流处理。