html
<div class="a">a
<div class="b">b
<div class="c">c</div>
</div>
</div>
css样式
<style>
.a {
width: 100px;
height: 170px;
background-color: aqua;
}
.b {
width: 80px;
height: 130px;
background-color: pink;
}
.c {
width: 50px;
height: 90px;
background-color: white;
}
</style>
js
<script type="text/javascript">
const a = document.getElementsByClassName("a")[0];
const b = document.getElementsByClassName("b")[0];
const c = document.getElementsByClassName("c")[0];
a.addEventListener("click", (e) => {
const { target, currentTarget } = e;
console.log(`target对应的是${target.className},currentTarget对应是${currentTarget.className}`);
});
b.addEventListener("click", (e) => {
const { target, currentTarget } = e;
console.log(`target对应的是${target.className},currentTarget对应是${currentTarget.className}`);
});
c.addEventListener("click", (e) => {
const { target, currentTarget } = e;
console.log(`target对应的是${target.className},currentTarget对应是${currentTarget.className}`);
});
</script>
从控制台输出的结果可以看出来,e.target是触发事件的元素,e.currentTarget是绑定事件的元素