事件冒泡与事件捕获

[liuduanyang]

事件冒泡与事件捕获是两种处理事件流的模型，分别由微软和网景公司提出

事件流

事件流是指HTML中从 document 到触发事件的元素 这一段代码（这一段DOM树结构）中事件触发的顺序

两种模型的概述

1. 事件捕获：
如图

假设 div 是触发事件的元素 事件流从 document 开始到 div逐级检查，凡是绑定事件的且设置为捕获模型的元素依序触发事件

举例之前，先说明一个问题，我们可通过 element.addEventListener('事件',回调函数,true or false) 来注册事件的响应函数，其中第三个参数表示采用的事件模型，如果为false 则为冒泡模型，为true 为捕获模型，不填为undefined 即冒泡模型

OK，现在开始举例说明（CSS代码不贴了）

html：

<div id="d1">
    爷爷
    <div id="d2">
        爸爸
        <div id="d3">儿子</div>
    </div>
</div>

js：

   var d1=document.getElementById("d1");
   var d2=document.getElementById("d2");
   var d3=document.getElementById("d3");
   d1.addEventListener("click",()=>{
       console.log("d1");
   },true);
   d2.addEventListener("click",()=>{
       console.log("d2");
   },true);
   d3.addEventListener("click",()=>{
       console.log("d3");
   },true);

分别点击
儿子(d3)：d1 d2 d3
父亲(d2)：d1 d2
爷爷(d1)：d1

2. 事件冒泡：
如图

假设 div 是触发事件的元素 事件流从 div 开始到 document逐级检查，凡是绑定事件的且设置为冒泡模型的元素依序触发事件

举例来说：
html：

<div id="d1">
    爷爷
    <div id="d2">
        爸爸
        <div id="d3">儿子</div>
    </div>
</div>

js：

   var d1=document.getElementById("d1");
   var d2=document.getElementById("d2");
   var d3=document.getElementById("d3");
   d1.addEventListener("click",()=>{
       console.log("d1");
   },false);
   d2.addEventListener("click",()=>{
       console.log("d2");
   },false);
   d3.addEventListener("click",()=>{
       console.log("d3");
   },false);

分别点击
儿子(d3)：d3 d2 d1
父亲(d2)：d2 d1
爷爷(d1)：d1

W3C标准

两家公司各自吹嘘自己的好用，争执不下，W3C采用中和的方法将二者结合。
如图所示：

即先进行事件捕获再进行事件冒泡

图片来自网络

举例说明：
只贴不同部分了
js:

   d1.addEventListener("click",()=>{
       console.log("d1");
   },false);
   d2.addEventListener("click",()=>{
       console.log("d2");
   },true);
   d3.addEventListener("click",()=>{
       console.log("d3");
   },false);

分别点击
儿子(d3)：d2 d3 d1
父亲(d2)：d2 d1
爷爷(d1)：d1

当点击儿子(d3)时，先进行事件捕获 所以d2触发click事件 然后进行事件冒泡 所以d3 d1分别触发click事件

当然我们可以给任何一个元素设置两种事件模式 比如d2 可以设置一个事件冒泡模式的 同时也可设置一个事件捕获模式的

但值得注意的是，如果在拐点 (触发事件的那个元素，比如点击儿子(d3)时的儿子(d3)) 处设置两个模式，应以二则的注册先后顺序来决定触发顺序

举例来说：
js：

   d1.addEventListener("click",()=>{
       console.log("d1");
   },false);
   d2.addEventListener("click",()=>{
       console.log("d2");
   },true);
   d3.addEventListener("click",()=>{
       console.log("d3 冒泡");
   },false);
   d3.addEventListener("click",()=>{
    console.log("d3 捕获")
   },true);

当点击儿子(d3)时： d2 d3 冒泡 d3 捕获 d1

对于事件代理来说，在事件捕获或者事件冒泡阶段处理并没有明显的优劣之分，但是由于事件冒泡的事件流模型被所有主流的浏览器兼容，从兼容性角度来说还是建议大家使用事件冒泡模型。