在 JavaScript 和 HTML DOM 中,事件通过事件冒泡或事件捕获的方式传播。当事件触发时,它经过一系列的 DOM 元素,currentTarget 始终指向事件处理程序当前正在处理的元素,而 target 属性则指向触发事件的元素。
下面是一个简单的例子,演示了 currentTarget 的使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>currentTarget Example</title>
</head>
<body>
<div id="outer">
<div id="inner">Click me</div>
</div>
<script>
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
outer.addEventListener('click', function(event) {
alert('Current Target: ' + event.currentTarget.id);
alert('Target: ' + event.target.id);
});
</script>
</body>
</html>
在这个例子中,当你点击 "Click me" 文字所在的 inner 元素时,会触发 click 事件,然后通过 event.currentTarget.id 获取当前正在处理的元素的 id 属性,以及通过 event.target.id 获取触发事件的元素的 id 属性。在事件冒泡的过程中,currentTarget 一直指向 outer 元素。
转载请注明出处:http://www.pingtaimeng.com/article/detail/6262/JavaScript 和 HTML DOM