<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>
