【前端】event.target 和 event.currentTarget 的区别
【前端】event.target 和 event.currentTarget 的区别
zhaokang555
发布于 2023-10-17 09:47:26
发布于 2023-10-17 09:47:26
event.target 和 event.currentTarget 的区别
举例说明：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div {
margin: 1rem;
padding: 1rem;
}
#a {background-color: #f00;}
#b {background-color: #0f0;}
#c {background-color: #00f;}
#d {background-color: #aaa;}
</style>
</head>
<body>
<div id="a">a
<div id="b">b
<div id="c">c
<div id="d">d</div>
</div>
</div>
</div>
<script>
function logTarget(e) {
console.log('target:' + e.target.id + ' & currentTarget:' + e.currentTarget.id);
}
document.getElementById('a').addEventListener('click', logTarget, false);
document.getElementById('b').addEventListener('click', logTarget, false);
document.getElementById('c').addEventListener('click', logTarget, false);
document.getElementById('d').addEventListener('click', logTarget, false);
</script>
</body>
</html>当点击d的时候，输出：
target:d & currentTarget:d
target:d & currentTarget:c
target:d & currentTarget:b
target:d & currentTarget:a当点击b的时候，输出：
target:b & currentTarget:b
target:b & currentTarget:a结论
- target始终鼠标点击的element，固定不变；
- currentTarget在事件捕获或者事件冒泡过程中，指向当前的element，会不断变化。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2016-02-26，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
