JS的事件的冒泡与捕获与目标

* 事件的冒泡与捕获(面试题) 与目标

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

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

• 目标:你点击在那个元素上，那么这个事件的目标就是这个元素
• 事件的冒泡与捕获(面试题)

  • 冒泡:就是从目标的事件处理函数开始，依次向上，一直到 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,我的点击事件被触发了')
        }
      

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

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

    •   // 0.获取元素
        var sBox = document.querySelector('.sBox')
        var box = document.querySelector('.box')
        var oBody = document.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)
      

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