【前端】currentTarget与target的区别
公众号「张孝梅Yardbaby」：分享优质成长干货~
前言
在前几天的前端面试中，面试官问了currentTarget与target的区别，我当时没回答出来，特此去学习了相关知识，在此记录下。
正文
我们先来看个例子：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="test1">
<div id="test2">test</div>
</div>
</body>
<script>
var test1 = document.getElementById("test1");
var test2 = document.getElementById("test2");
test2.onclick = function(e) {
console.log(e.target);
console.log(e.currentTarget);
console.log(this);
console.log(e.target === e.currentTarget);
console.log(e.target === this);
console.log(e.currentTarget === this);
};
</script>
</html>控制台打印结果：
结论： 当事件处理程序注册的元素等于事件的实际目标元素的时候，e.target和e.currentTarget以及this三者相同。
再来一个例子：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="test1">
<div id="test2">test</div>
</div>
</body>
<script>
var test1 = document.getElementById("test1");
var test2 = document.getElementById("test2");
test1.onclick = function(e) {
console.log(e.target);
console.log(e.currentTarget);
console.log(this);
console.log(e.target === e.currentTarget);
console.log(e.target === this);
console.log(e.currentTarget === this);
};
</script>
</html>控制台打印结果：
结论： 当事件处理程序注册的元素不等于事件的实际目标元素的时候，e.currentTarget和this两者相同，但e.target不与这两者相同。
总结
currentTarget：事件处理程序注册的元素。
target：事件的实际目标元素。
编辑于 2022-04-19 14:27