currentTarget指向监听者Target：指向触发者
在JavaScript的事件处理中，currentTarget 和 target 是两个重要的属性，它们常常用于区分事件处理函数当前绑定的元素和实际触发事件的元素。这两个属性的意义可以用下面的方式解释：
currentTarget
- 指向监听者：这意味着
currentTarget指向的是当前正在处理该事件的元素，也就是事件监听器被添加到的那个元素。换句话说，它是事件监听器所绑定的DOM元素。
target
- 指向触发者：
target属性指向的是实际触发该事件的元素。这通常是最深层的、用户与之交互的元素，也就是事件冒泡或捕获过程中的最初触发者。
举个例子来说明：
html复制代码
<div id="outer" style="width: 200px; height: 200px; background-color: lightblue;"> | |
Outer Div | |
<div id="inner" style="width: 100px; height: 100px; background-color: lightgreen;"> | |
Inner Div | |
<button id="button">Click Me</button> | |
</div> | |
</div> | |
<script> | |
document.getElementById('outer').addEventListener('click', function(event) { | |
console.log('currentTarget:', event.currentTarget.id); // 输出 "currentTarget: outer" | |
console.log('target:', event.target.id); // 输出可能是 "target: button" 如果点击了按钮 | |
}); | |
</script> |
在这个例子中，如果你点击了内部的button元素，事件会冒泡到outer div，因为我们在outer div上添加了事件监听器。在这种情况下：
event.currentTarget将指向outerdiv（因为监听器是添加在这个元素上的）。event.target将指向被点击的button元素（因为它是实际触发事件的元素）。
但是，如果你点击的是outer div但不是button或inner div，那么event.target和event.currentTarget将指向同一个元素（即outer div）。