JavaScript 中怎么在事件冒泡中获取当前目标对象-js教程-PHP中文网

currenttarget 指向当前绑定事件处理函数的元素，target 指向真正触发事件的原始元素；事件委托中 currenttarget 始终是监听器绑定的父级元素，且与普通函数中 this 一致，箭头函数中须用 event.currenttarget。

javascript 中怎么在事件冒泡中获取当前目标对象

在事件冒泡过程中，可以通过事件对象的 currentTarget 属性获取当前绑定事件处理函数的那个元素（即正在执行处理函数的监听目标），而用 target 获取真正触发事件的原始元素（可能位于内部子节点）。

区分 target 和 currentTarget

target 始终指向事件最初发生的 DOM 节点（比如你点击了一个按钮内的 span，target 就是那个 span）；currentTarget 指向当前事件处理函数所绑定的 DOM 节点（比如事件监听器绑在了外层 div 上，即使点击的是内部 span，在冒泡到该 div 时，currentTarget 就是这个 div）。

在冒泡阶段准确获取“当前处理目标”

当使用事件委托或父元素监听子元素事件时，currentTarget 就是你需要的“当前目标对象”：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

它不会随事件传播路径变化而改变——在每个冒泡阶段的监听器中，currentTarget 都是该监听器绑定的元素
即使事件从深层子节点冒泡上来，只要监听器挂在某个中间父级上，currentTarget 就是那个父级
与 this 的值一致（在普通函数中），但推荐显式使用 event.currentTarget 更清晰可靠

实际写法示例

假设有一个 ul，里面多个 li，监听在 ul 上：

document.querySelector('ul').addEventListener('click', function(e) {
  console.log('原始点击元素:', e.target);         // 可能是 li、span、文本节点等
  console.log('当前监听元素:', e.currentTarget); // 总是 ul 元素
  console.log('this 指向:', this);               // 通常也等于 e.currentTarget
});