事件对象中，target获取实际触发事件的原始元素，currentTarget获取绑定监听器的元素，relatedTarget用于鼠标/焦点事件中关联的相邻元素。
在 JavaScript 中，事件对象（Event）提供了多个属性用于获取触发事件的源元素及其上下文信息。关键在于区分不同场景下最可靠、兼容性好且语义清晰的属性。
target：获取真正触发事件的原始元素
event.target 指向**事件最初发生的 DOM 节点**，即用户实际点击/操作的那个元素（哪怕它被包裹在父元素中）。它不受事件委托影响，始终反映“谁被点”。
- 适用于所有事件类型（click、input、keydown 等）
- 注意：如果事件经过冒泡，
target不会随冒泡改变 - 示例：
<button><span>提交</span></button>，点击 span 时event.target是<span>元素
currentTarget：获取当前绑定事件监听器的元素
event.currentTarget 指向**当前正在执行事件处理函数的那个元素**，也就是 addEventListener 所绑定的目标节点。它在事件冒泡或委托中非常关键。
- 在直接绑定时，
target === currentTarget - 在事件委托中（如给
ul绑定 click，实际点的是li），currentTarget是ul，target是li - 这是判断“事件在哪一层被监听到”的唯一准确方式
relatedTarget：获取与事件相关的另一个元素（仅部分事件）
event.relatedTarget 提供**与当前事件有逻辑关联的相邻元素**，主要用于鼠标进出类事件：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
-
mouseenter/mouseleave：进入/离开时的前一个或下一个元素 -
focusin/focusout：获得/失去焦点时的上一个或下一个聚焦元素 - 该属性可能为
null（如从页面外移入），使用前建议判空
补充：快速获取源元素的结构与状态信息
拿到 target 或 currentTarget 后，可进一步读取其细节：
-
element.tagName、element.className、element.id—— 基础标识 -
element.dataset.xxx—— 获取自定义数据属性（如data-id="123"） -
element.getAttribute('name')—— 安全读取任意属性（包括非标准属性） -
element.closest('selector')—— 向上查找最近匹配的祖先，常用于委托中的语义定位（如target.closest('button')）
不复杂但容易忽略：多数情况下，用 event.target 就能拿到真实触发源；需要知道“监听器挂在哪”就看 currentTarget；做菜单展开、表单切换等交互时，relatedTarget 能帮你判断进出路径是否合理。
