以下是一个简单的例子，演示如何使用 currentTarget 属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>currentTarget 示例</title>
</head>
<body>
<div id="outer" style="border: 2px solid red; padding: 10px;">
<p id="inner" style="border: 2px solid blue; padding: 10px;">点击这里</p>
</div>
<script>
// 获取页面上的两个元素
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");
// 添加点击事件处理程序
outer.addEventListener("click", function(event) {
// 使用 event.currentTarget 获取事件的当前目标
var currentTarget = event.currentTarget;
// 更新页面，显示事件的当前目标的 ID
alert("事件的当前目标: " + currentTarget.id);
});
inner.addEventListener("click", function(event) {
// 在内部元素上的点击事件
// event.currentTarget 仍然返回外部元素，因为事件冒泡
});
</script>
</body>
</html>
在这个例子中，当点击页面上的 <p> 元素时，事件处理程序会弹出一个提示框，显示事件的当前目标的 ID。尽管点击的是内部元素，但由于事件冒泡，event.currentTarget 仍然返回外部元素。如果你想获取最初触发事件的目标元素，可以使用 event.target 属性。
转载请注明出处：http://www.zyzy.cn/article/detail/4459/HTML