//样式
<style>
#d1{width: 400px;height: 400px;background: pink; }#d2{width: 300px;height: 300px;background: yellow; }
#d3{width: 200px;height: 200px;background: black; }
</style>
<body>
<div id="d1">
<div id="d2">
<div id="d3"></div>
</div>
</div>
</body>
//js
<script>
var d1=document.getElementById("d1");
var d2=document.getElementById("d2");
var d3=document.getElementById("d3");
//event.target代表真正触发的元素,event.currentTarget事件监听者=this,即事件的触发者
d1.οnclick= function (){
if(event.target==d2){
console.log(event.target); //d3
// console.log(event.currentTarget); //d1
}
else if(event.target==d3){
console.log(event.target); //d2
// console.log(event.currentTarget); //d1
}
else{
console.log(event.target); //d1
// console.log(event.currentTarget); //d1
}
}
</script>