<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>target¤tTarget</title>
<style>
.container {
background-color: deeppink;
padding: 1rem;
}
.main {
background-color: orangered;
padding: 2rem;
}
</style>
</head>
<body>
<div class="container" onclick="clickC(event)">
<div class="main" onclick="clickBtnM(event)">
<button onclick="clickBtn(event)">点一下</button>
</div>
</div>
<script>
// target触发事件的标签 currentTarget绑定事件的标签
function clickC(e) {
console.group('.container');
console.log(e.target);
console.log(e.currentTarget);
console.groupEnd();
}
function clickBtnM(e) {
console.group('.main');
console.log(e.target);
console.log(e.currentTarget);
console.groupEnd();
}
function clickBtn(e) {
console.group('btn');
console.log(e.target);
console.log(e.currentTarget);
console.groupEnd();
}
</script>
</body>
</html>
点击按钮 ，结果显示： 总结： target表示触发事件的标签 currentTarget表示绑定事件的标签。 在上述代码中，点击了按钮，所以输出的target都为按钮的标签，currentTarget绑定事件的标签是它们各自本身的标签。
