JS事件传播

事件的传播

• 我们如果在浏览器内用一个宽高500px的父盒子, 内部有一个水平垂直都居中的宽高100px的子盒子, 并且这两个盒子都设置上点击事件
• 那么我们如果点击在子盒子身上, 其实也是点击在了父盒子身上
• 这就是 **事件传播**

当元素触发一个事件的时候, 其父元素也会触发相同的事件, 父元素的父元素也会触发相同的事件

   *点击子盒子, 会触发子盒子的点击事件
   * 也是点击在了父盒子上, 也会触发父盒子的点击事件
   * 也是点击在了 body 上, 也会触发 body 的点击事件
   * 也是点击在了 html 上, 也会触发 html 的点击事件
   * 也是点击在了 document 上, 也会触发 document 的点击事件
   * 也是点击在了 window 上, 也会触发 window 的点击事件
   * 也就是说, 页面上任何一个元素触发事件, 都会一层一层的最终导致 window 的相同事件触发, 前提是各层级元素得注册有相同的事件, 不然不会触发
   

在事件的传播过程中, 有一些注意的点

1. 只会传播同类事件,如果是点击事件, 那么只会触发父级或者父级的父级他们注册的点击事件, 其他类型的事件不会得到触发
2. 只会从点击元素开始按照 html 的结构逐层向上元素的事件会被触发
3. 内部元素不管有没有该事件, 只要上层元素有该事件, 那么上层元素的事件就会被触发

思考

• 事件确实会从自己开始, 到 window 的所有相同事件都会触发,因为我们点在自己身上, 也确实逐层的点在了直至 window 的每一个元素身上,但是我们到底是先点在了自己身上, 还是先点在了 window 身上???

先点在自己身上, 就是先执行自己的事件处理函数, 逐层向上最后执行 window 的事件处理函数
反之, 则是先执行 window 的事件处理函数, 逐层向下最后执行自己身上的事件处理函数

    <div class="box">
        <div class="sBox"></div>
    </div>

    .box {
        width: 500px;
        height: 500px;
        background-color: pink;
    }
    .sBox {
        width: 100px;
        height: 100px;
        background-color: green;
    }

    // 0. 获取元素
    var sBox = document.querySelector('.sBox')
    var box = document.querySelector('.box')
    var oBody = document.body

    sBox.onclick = function () {
        console.log('我是 内层 DIV, 我的点击事件被触发了')
    }

    box.onclick = function () {
        console.log('我是 外层 DIV, 我的点击事件被触发了')
    }

    oBody.onclick = function () {
        console.log('我是 body, 我的点击事件被触发了')
    }