DOM事件等级以及事件冒泡、捕获

在学习什么是冒泡、捕获、事件流前我们先了解一下dom事件等级

DOM事件等级

dom事件等级分别是

dom0级（用on搭载事件名称如onclick）：
一种是在标签内部写，on加事件名称如：οnclick=“函数名()”
第二种如：div1.οnclick=function (){}

dom2级(添加监听事件addEventListener()，解绑监听事件removeEventListener()：
在学习到**addEventListener()**监听事件时，我们知道监听事件的括号里可以填入三个值

div1.addEventListener("click",function(){
            console.log("事件触发了");
        },false);

1.事件名称
2.事件触发的时候执行的函数
3.true和false(可选参数)
而第三个值true则表示事件捕获，false则表示事件冒泡;
{ 事件监听和解绑事件
监听事件相当于把函数和事件绑定在一起，而事件解绑切断他们之间的联系。
通常来说我们在写项目做练习的时候最好把要执行的函数写在外面
监听事件的函数如果是匿名函数那么你的解绑事件写在外面无效。
如果你想解绑，代码如下：

div1.addEventListener("click",function(){
            div1.removeEventListener("click",arguments.callee);
        },true);

arguments.callee这句话指针指向当前函数（写匿名函数最好是在你不考虑解绑的时候），
监听事件里引入函数不要写括号
}

dom3级：只是增加了几个事件类型（如键盘事件）;

(为啥没有1级事件？
因为DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。)
{ 使用on搭载事件和添加监听事件的区别？
用on搭载事件：如你写了两个同一元素的onclick事件，后面的事件会覆盖前面的onclick事件
用addEventListener：不会被覆盖
}

———————————————————————————————————————

事件流

（dom0级没有事件流）
当一个元素产生一个事件时,该事件会在元素节点与根节点之间的路径传播，路径所经过的节点都会收到该事件，这个传播的过程叫做DOM事件流。例图如下：

事件捕获：事件从最外层的window对象到目标节点的父节点依次触发的阶段。(从外到内)

事件冒泡：事件从目标节点的父节点到最外层的window对象依次触发的阶段。(从内到外)

————————————————————————————————
那么我们来深入的了解一下：
以下是实例：
这是不写第三个值得时候（点击我是从绿到红依次点击）
可以看到是从内到外依次触发

这是全写false也就是事件冒泡的示例
和什么都不填的时候是不一样的

这是全写false时的示例
执行顺序是由外到内的

当红绿为捕获，黄蓝为冒泡时

——————————
还有很多组合大家可以自行尝试
注：以上的示例我的点击顺序都是由内到外

所以最后我总结了几个点关于事件冒泡和捕获
1.监听事件第三个值不写时默认为冒泡（false）;
2.捕获优先级高于冒泡，如上面最后一个示例。
3.捕获的执行顺序从外到内（父级元素优先于子级元素）
4.冒泡的执行顺序从内到外（子级元素优先于父级元素）