<!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>
<!DOCTYPE html>
<html lang="en">
<head
阅读背景：
target (触发事件的标签)和currentTarget（绑定事件的标签）_蓝图Lily的博客
来源：互联网
分享到：
