event.target指向真正触发事件的dom元素，用于区分currenttarget、实现事件委托、处理嵌套元素点击及配合stoppropagation控制冒泡。

event.target 是事件对象的属性，指向**真正触发事件的那个 DOM 元素**，而不是绑定事件监听器的元素（后者是 event.currentTarget）。它在事件冒泡、委托和动态内容中特别有用。

一、基础用法：区分 target 和 currentTarget

当你给父元素绑定事件，但点击的是子元素时，event.target 是被点击的最内层元素，而 event.currentTarget 始终是监听器绑定的位置：

<div id="box">
  <button>点我</button>
  <span>文字</span>
</div>

<script>
  document.getElementById('box').addEventListener('click', function(e) {
    console.log('target:', e.target);         // 可能是 button 或 span
    console.log('currentTarget:', e.currentTarget); // 始终是 div#box
  });
</script>

二、事件委托：用 target 判断具体操作对象

在列表或动态生成的元素中，不给每个子项单独绑事件，而是监听父容器，再通过 event.target 判断是否点中了目标类型：

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

• 检查 e.target.tagName 或 e.target.classList
• 常用写法：e.target.matches('button.delete') 或 e.target.closest('li')
• 避免误触发：加条件过滤，比如只响应按钮、链接等可交互元素

• 删除苹果
• 删除香蕉

<script> document.getElementById('list').addEventListener('click', function(e) { if (e.target.classList.contains('remove')) { e.target.closest('li').remove(); // 删除对应 li } }); </script>

三、注意边界情况

event.target 总是原生 DOM 元素，不会是文本节点（除非显式绑定在文本上），但可能意外是 <span></span>、<i></i> 等内部标签。建议：

• 用 e.target.closest('selector') 向上查找最近的符合条件的祖先，更健壮
• 避免直接依赖 e.target.nodeName，因为嵌套图标、空格、换行都可能影响实际点击位置
• 表单中注意：点击 label 会触发关联 input 的 click，此时 target 是 label，不是 input

四、与 stopPropagation 配合使用

有时你只想处理目标元素本身的行为，不希望事件继续冒泡。可在判断出有效 target 后调用 e.stopPropagation()：

• 防止父级监听器重复响应
• 常用于下拉菜单、模态框等需要精确控制事件流的场景
• 注意：不要滥用，否则可能破坏预期的事件传播逻辑

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南