2018.8.1

事件捕获

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