推荐用 event.target.matches() 判断特定 class 元素，支持复杂选择器；若仅检测自身 class 用 classList.contains()；嵌套结构用 closest() 向上查找；需先判断 e.target 是否为 Element 节点以防报错。
不能直接在父级容器上用 target 判断“是不是特定 class 元素”，因为 target 是事件对象的属性，不是 CSS 选择器或匹配方法。但你可以通过事件委托 + event.target 结合 classList.contains() 或 matches() 来实现这个目的。
用 event.target.matches() 精准判断
这是最推荐的方式：监听父容器的点击事件，然后检查 event.target 是否匹配某个 CSS 选择器（比如 .btn-primary）。
document.querySelector('.container').addEventListener('click', function (e) {
if (e.target.matches('.special-item')) {
console.log('点中了带 .special-item 的元素');
// ✅ 支持后代元素、伪类（如 .special-item:hover），且不依赖 class 顺序
}
});
用 event.target.classList.contains() 判断 class 存在
适用于只需要检测某个 class 是否存在，且目标是元素自身（不关心是否匹配复杂选择器）：
document.querySelector('.container').addEventListener('click', function (e) {
if (e.target.classList.contains('delete-btn')) {
console.log('点中了删除按钮');
// ⚠️ 注意：只检测元素自身是否有该 class，不匹配子元素上的同名 class（除非你明确要这样）
}
});
注意事件冒泡与目标元素层级
点击子元素时，event.target 是**最深被点击的那个元素**，未必是你期望的“有 class 的元素”。常见误区：
- 如果
.special-item内还有<span>或<i>，点击图标时target是图标元素，它可能没有那个 class - 解决办法：向上查找最近的符合条件的祖先（包括自己）
document.querySelector('.container').addEventListener('click', function (e) {
const item = e.target.closest('.special-item');
if (item) {
console.log('点中了 .special-item 或其内部任意位置');
// ✅ closest() 自动处理嵌套结构，非常实用
}
});
避免误判：排除非元素节点和无关标签
有时 event.target 可能是文本节点、<svg>、<use> 等，直接调用 matches() 或 classList 会报错：
document.querySelector('.container').addEventListener('click', function (e) {
// 先确保 target 是元素节点
if (!(e.target instanceof Element)) return;
if (e.target.matches('.action-btn')) {
// 安全执行
}
});
