event.target指向事件实际触发的最内层元素，如子节点或文本节点；event.currenttarget始终是绑定事件监听器的元素，等价于回调函数中的this，两者相等仅当事件直接发生在绑定元素自身。
用 event.target 获取用户真正点中、输入或交互的那个元素；用 event.currentTarget 拿到当前执行事件处理函数的绑定元素——它始终等于函数里的 this。关键不在“谁写了监听器”，而在“谁被点”和“谁在听”。
target 是实际被操作的最内层元素
event.target 始终指向事件发生的源头，不管它是不是直接绑了事件。比如点击一个按钮内的图标，target 就是 <i></i> 标签本身；点击文字，就是 <span></span> 或文本节点。它不关心父级有没有监听器，只认“下手点”。
- 常用于判断具体哪个子项被触发，尤其在列表、菜单、表格中
- 可能返回文本节点（
nodeType === 3），使用前建议用event.target.closest('selector')安全匹配 - 在表单中点击 label 触发 input，
target是 label，不是 input
currentTarget 是当前执行回调的绑定容器
event.currentTarget 总是当前正在运行事件处理函数的那个元素，也就是调用 addEventListener 或赋值 onclick 的那个 DOM 节点。它不会随点击位置变化，只取决于监听器挂在哪。
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 等价于事件函数内部的
this，可放心用于访问父容器属性（如dataset.id） - 在事件委托场景下，即使你点了子元素，
currentTarget仍是父容器（比如<ul></ul>） - 冒泡过程中，如果同一个事件在多层注册，每层的
currentTarget各不相同
典型委托场景：一父控多子
给 <ul id="list"></ul> 绑点击，里面多个 <li> 和删除按钮：
document.getElementById('list').addEventListener('click', function(e) {
if (e.target.classList.contains('delete-btn')) {
// 点的是删除按钮 → 用 target 精准识别
e.target.closest('li').remove();
}
if (e.currentTarget === this) {
// 这里一定成立 → currentTarget 就是 #list 元素
console.log('监听器挂在 ul 上');
}
});
- 点击按钮：
target是按钮，currentTarget是<ul></ul> - 点击空白
<li>区域：target是<li>，currentTarget仍是<ul></ul> - 两者相等仅当事件直接发生在绑定元素自身，且无子元素参与交互
快速验证小技巧
调试时加一行打印，直观对比：
element.addEventListener('click', e => {
console.log('target:', e.target.tagName, 'currentTarget:', e.currentTarget.tagName);
});
- 点子元素 → 通常
target !== currentTarget - 点绑定元素自身（无子内容或 pointer-events: none）→ 两者 tagName 相同
- 用
e.target === e.currentTarget可判断是否“原地触发”，适合做条件分支
