<style>
*{
margin:0;
padding:0;
}

div1{

width:300px;
height:300px;
background: #f00;
line-height: 300px;

}

div2{

width:200px;
height:200px;
background: #f0f;
line-height: 200px;

}

div3{

width:100px;
height:100px;
background: #0ff;

}
</style>

<div id='div1'>
<div id='div2'>
<div id='div3'></div>
</div>
</div>

<script>
var div1=document.getElementById('div1');
var div2=document.getElementById('div2');
var div3=document.getElementById('div3');
div1.addEventListener('click',function(){
console.log('我是div1');
},true)
div2.addEventListener('click',function(){
console.log('我是div2');
},true)
div3.addEventListener('click',function(){
console.log('我是div3');
},true)
</script>