event.target 指真正触发事件的DOM元素，this指向绑定监听器的元素；target可能为子节点或文本节点，应优先用closest()安全查找容器，自定义事件中target需手动设置。
event.target 是什么，和 this 有什么区别
event.target 指向**真正触发事件的那个 DOM 元素**，哪怕事件是委托到父元素上监听的。而 this（或 event.currentTarget）指向的是**当前绑定事件监听器的那个元素**——两者在事件冒泡场景下经常不同。
比如给 <ul> 绑了点击事件，但用户点的是里面某个 <li>，这时 event.target 是那个 <li>，this 是 <ul>。
为什么直接用 event.target 可能拿错元素
用户点击的可能是子元素里的文字、图标、<span> 或空格区域，event.target 就会落到最内层的节点上，而不是你预期的“可操作容器”。常见错误现象包括：
- 点击按钮边缘却拿到
<svg>或<path>，导致target.classList.contains('btn')失败 - 点击带 padding 的卡片，实际
target是<div>内部的文本节点（Node.TEXT_NODE），target.tagName为undefined - 用
target.parentElement层层往上找，但没加边界判断，一不小心走到document或null
安全获取原始目标容器的推荐写法
不要无条件信任 event.target，要结合语义和结构做“向上查找”：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 用
event.target.closest('selector')—— 最简洁可靠，它从target自身开始向上找匹配的第一个祖先（含自身），返回null如果没找到 - 避免手动循环
parentNode，除非你需要中间某一层特定逻辑 - 如果必须用
target原值，先过滤掉文本节点：if (event.target.nodeType === Node.ELEMENT_NODE) { ... } - 注意兼容性：
closest()在 IE 中不支持，如需兼容 IE，得用 polyfill 或降级为matches()+ 循环
示例：委托在 <table> 上处理行点击，但用户可能点到 <td> 里的 <button>
table.addEventListener('click', e => {
const row = e.target.closest('tr');
if (!row) return;
console.log('点击的行数据ID：', row.dataset.id);
});
event.target 在自定义事件中是否可用
不可用 —— 自定义事件（new Event() 或 new CustomEvent()）默认不携带 target，除非你显式指定 bubbles: true 并在 dispatchEvent() 时传入目标元素。
- 原生事件（click、input、keydown 等）自动设置
target - 自定义事件中
event.target是调用dispatchEvent()时传入的那个元素，不是“触发源头” - 如果想模拟原生行为，得自己把源头信息塞进
detail字段，比如：new CustomEvent('item-select', { detail: { source: realTarget } })
真正容易被忽略的是：事件委托 + 动态插入内容 + event.target 查找逻辑这三者叠加时，closest() 的选择器必须覆盖所有可能的触发路径，否则会静默失败。
