事件的冒泡与捕获

目标

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

冒泡

• 冒泡:
  • 就是从 目标 的事件处理函数开始, 依次向上, 一直到 window 的事件处理函数触发也就是说从 下向上的执行事件处理函数
  • 目标元素 -> body -> html -> document

捕获

• 捕获:
  • 就是从 window 的事件处理函数开始, 依次向下, 一直到 目标 的事件处理函数触发 也就是说从上向下的执行 事件处理函数
  • document -> html -> body -> 目标元素

区别

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

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