事件传播

    事件传播
     假设我们在浏览器捏有一个高500px，内部有一个水平居中的盒子高100px
     当我点击在子盒子上的时候，同时也是点击在了父盒子身上
     这种情况就叫做事件传播
     当一个元素触发一个事件的时候，这个元素的父节点也会触发相同的事件，父元素的父元素也会触发相同的事件
     点击了子盒子会触发子盒子的点击事件
     也是点击到了父级盒子，也会触发父级盒子点击事件
     也是点击到了body上，也会触发body点击事件
     也是点击到了html上，也会触发html点击事件
     也是点击到了document文档上（页面），也会触发document点击事件
     也是点击到了window对象上，也会触发window对象点击事件
     注意 只会传播同类事件，如果是点击事件，那么只会触发父级或者父级的父级他们注册的点击事件，其他事件的类型不会得到触发
     只会从点击的元素开始，按照html的结构，逐层向上传播
     内部元素不管有没有该事件，只要上层元素有该事件，那么上层元素的事件就会触发
     ```
     <style>
    #box {
        width: 500px;
        height: 500px;
        background-color: pink;
        margin: 50px;
    }

    #box1 {
        width: 100px;
        height: 100px;
        background-color: skyblue;
    }
</style>
    <div class = "box"><div>
    ```
    //获取元素
    var box = document.getElementById('box')
    var box1 = document.getElementById('box1')
    var obody = document.body
    box1.onclick = function () {
        console.log('我是内层div我的点击事件被触发了');
    }
    box.onclick = function () {
        console.log('我是外层div我的点击事件被触发了');
    }
    obody.onclick = function () {
        console.log('我是body我的点击事件被触发了');
    }
     
     
     ```