样式代码

  <style>
    .box {
        width: 500px;
        height: 500px;
        background-color: pink;
    }

    .sBox {
        width: 100px;
        height: 100px;
        background-color: green;
    }
</style>

body代码

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

目标

目标: 你点击在那个元素上, 那么这个事件的目标 就是这个元素

事件的冒泡与捕获

冒泡: 就是从 目标 的事件处理函数开始, 依次向上, 一直到 window 的事件处理函数触发

也就是说从下向上的执行 事件处理函数

捕获: 就是从 window 的事件处理函数开始, 依次向下, 一直到 目标 的事件处理函数触发

也就是说从上向下的执行 事件处理函数

区别: 就是在事件的传播中, 多个同类型的事件处理函数的执行顺序不同, 仅此而已

0. 获取元素

    var sBox = document.querySelector('.sBox')
    var box = document.querySelector('.box')
    var oBody = document.body

1. 按照事件冒泡的形式传播

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

2. 按照事件捕获的形式传播

addEventListener 第三个参数就是决定当前传播方式为 捕获还是冒泡

默认第三个参数为 false, 代表传播方式为 冒泡

如果想按照捕获的形式传播, 那么给第三个参数 传递一个 true

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

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

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