事件捕获和冒泡学习

2019-12-25 本文已影响0人 Z包子

捕获和冒泡

一个完整的DOM事件流2.0包含三个阶段

捕获阶段：事件从Document节点自上而下向目标节点传播的阶段，至目标元素父元素为捕获阶段

目标阶段：真正的目标节点正在处理事件的阶段

冒泡阶段：事件从目标节点自上而下向Document节点传播的阶段

eg：当点击一个元素A触发click时，该事件会先进入捕获阶段，从顶层即document开始向下传播，一直到目标元素A进入目标阶段，目标阶段结束后，事件会进入冒泡阶段，直到document停止。

即捕获阶段由外向内，冒泡阶段由内向外。如下图

一个完整的事件流

举例

<div class="grandpa">我是爷
    <div class="father">我是爹
        <div class="son">我是儿</div>
    </div>
</div>
<script>
document.querySelector('.grandpa').onclick = function () {
  console.log('我是爷')
}
document.querySelector('.father').onclick = function (e) {
  console.log('我是爹')
}
document.querySelector('.son').onclick = function () {
  console.log('我是儿')
}
</script>

当点击son元素时，控制台输出如下

输出结果

当点击.son时，捕获阶段依次经过ducument/html/body/.grandpa/.father；然后触发.son绑定事件，进入目标阶段，执行完目标阶段后，再从.father依次进入冒泡阶段。

阻止冒泡

点击son时，不想触发father和grandpa绑定的事件，则需要阻止事件冒泡，修改son的click事件

document.querySelector('.son').onclick = function ($e) {
    // 不考虑兼容 >=ie9，直接调用stopPropagation
    // $e.stopPropagation();
    // 兼容写法
    $e = window.event || $e;
    if (document.all) {  //只有ie识别
        $e.cancelBubble = true;
    } else {
        $e.stopPropagation();
    }
    console.log('我是儿')
}

此时点击son时，只会输出【我是儿】，而不会触发father和grandpa的点击事件。

事件冒泡不仅可以被阻断，也可以改变触发阶段。

注册监听事件

上面演示的click事件绑定，通过ele.onclick=fn进行绑定，只适合处理简单场景，假设要在统一元素绑定多个click事件时，后赋值函数会覆盖前面赋值的函数。可使用ele.addEventListener(type,listener)绑定多个事件。(注:<=IE8的浏览器需要通过ele.attachEvent注册监听事件)
在之前的js中添加代码

var father= document.querySelector('.son')
son.addEventListener("click", function(){
    console.log("son1")
},false)
father.addEventListener("click", function(){
    console.log("son2")
},false)

点击son输出结果

addEventListener顺序执行

addEventListener 按照注册顺序执行，通过ele.onclick=fn绑定的函数，也是按照注册顺序执行

addEventListener第三个参数可以改变事件触发阶段，默认为false，冒泡阶段触发。可以直接赋boolean值，也可以是对象，修改多个属性。
注:IE9-IE11仅支持第一种，edge两种都支持

target.addEventListener(type, listener[, useCapture]);
target.addEventListener(type, listener[, opts]);

type 表示监听事件类型的字符串。
listener 当所监听的事件类型触发时，会接收到一个事件通知。listener 必须是一个实现了 EventListener接口的对象，或者是一个函数
useCapture 可选参数，默认为false，表示是否在捕获阶段
opts 可选参数，包含三个参数

  {
    capture:false，  //表示是否在捕获阶段，捕获阶段触发
    once:false,         //表示是否执行一次，设置为true则只会执行一次
    passive:false      // 表示是否顺从模式
  }

第三个参数为boolean值，若修改该值为true，事件将会在捕获阶段触发

<div class="grandpa">我是爷
 <div class="father">我是爹
    <div class="son">我是儿</div>
 </div>
</div>
<script>
  document.querySelector('.grandpa').addEventListener('click', function () {
    console.log('我是爷')
  }, false)
  document.querySelector('.father').addEventListener('click', function () {
    console.log('我是爹')
  }, true)  // 修改参数
  document.querySelector('.son').addEventListener('click', function () {
    console.log('我是儿')
  }, false)
</script>

点击son，输出如下

useCapture
father的绑定监听事件，优先执行了，也就是在捕获阶段执行，而非在冒泡阶段执行。

第二种参数为一个配置对象，capture和once好理解，单独说下passive
一个很重要的使用场景，在移动端，通常会监听touchstart事件，但是，由于浏览器不能预先预知是否阻拦了默认事件，只能预处理一次监听事件，检查是否执行了e.preventDefault()，这个过程消耗资源，会导致滚动出现卡顿现象。
当设置passive:true时，表示该监听函数为顺从模式，不会阻拦默认事件，浏览器只需要解析opts而非预处理监听事件，不会浪费资源，进而优化了卡顿。当设置passvie:true时，使用e.preventDefault()会失效，且控制台会有错误提醒

判断是否支持passive

var passiveSupported = false;
try {
  var options = Object.defineProperty({}, "passive", {
    get: function() {
      passiveSupported = true;
    }
  });
  window.addEventListener("test-passive", null, options);
} catch(err) {}

移除事件监听

target.removeEventListener(type, listener[, useCapture]);
target.removeEventListener(type, listener[, opts]);

必备三要素：【类型】【监听器】【是否捕获阶段触发】
移除事件监听时，需要一一对应，如果userCapture为true，对应的移除时也必须为true 。因为这个监听器也有可能还注册在了冒泡阶段，那样的话，同一个监听器实际上对应着两个监听器对象（通过 getEventListeners() 可看到）
所以，设置passive和once并不需要一一对应，如果没有设置capture，则可以省略第三个参数。