事件处理程序中this，currentTarget， target所表示不同的值

最新推荐文章于 2025-07-17 15:41:37 发布

原创最新推荐文章于 2025-07-17 15:41:37 发布 · 468 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #css #事件委托

探讨了在事件处理程序中currentTarget与target的区别，currentTarget指向事件处理程序绑定的元素，而target则指向实际触发事件的元素。通过直接绑定和事件委托两种场景对比，深入解析了this、currentTarget与target之间的关系。

在事件处理程序中，当触发了dom中的某个事件，浏览器会将一个event对象传入到事件处理程序，这个对象包含所有与事件有关的信息，比如：导致事件的元素、事件的类型等。event对象包含一些属性和方法，其中currentTarget和target与事件目标有关。

对currentTarget和target属性的官方说明：
currentTarget：事件处理程序当前正在处理的那个元素
target：事件的目标
this并不是event特有的属性，它在事件处理程序中代表接收事件的元素
在事件处理程序内部，对象this始终等于currentTarget的值， target的值会根据以下两种情况有所不同，因为target是事件的实际点击目标。
1.直接将事件处理程序绑定给目标元素。

<body>
<div id="parent">
<input type="button" value="hi" id="myBtn">
</div>

<script>
var btn = document.getElementById('myBtn')
var par = document.getElementById('parent');
btn.onclick = function(e) {
console.log(e.currentTarget === btn);
console.log(e.target === btn);
console.log(this === btn);
}
</script>
</body>

可以看出当直接将事件处理程序绑定给要点击的目标时，this，currenTarget，target所指代的目标是相同的，也就是说接收事件处理程序的元素和实际中被点击的元素是同一个。

2.事件委托。
事件处理程序绑定在父元素上，然后再冒泡阶段逐级向外扩散，遇到事件处理程序就触发。

<body>
<div id="parent">
<input type="button" value="hi" id="myBtn">
</div>

<script>
var btn = document.getElementById('myBtn')
var par = document.getElementById('parent');
par.onclick = function(e) {
console.log(e.currentTarget === par);
console.log(e.target === btn);
console.log(this === par);
}
</script>
</body>