DOM事件流

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情

事件的传播

当元素触发一个是事件的时候，其父元素也会触发相同的事件，父元素的父元素也会触发相同的事件。

细细道来，当我们有一串如下的代码：

<div id="outer">
    <div id="center">
        <div id="inner">
        </div>
    </div>
</div>
<script>
    outer.onclick=function(){
        console.log("1111");
    }
    center.onclick=function(){
        console.log("2222");
    }
    inner.onclick=function(){
        console.log("3333");
    }
</script>

在我们点击最上面的一个元素时，传播就会开始。如果他的父元素也有跟他同类型的事件的话，那么就会跟他一起执行，没有同类型的事件就会跳过这个元素再去找父元素的父元素一直到window为止

给我们的每个div都添加上点击事件，先点击最上面的id为child的div块，根据事件传播的性质下面两个块的点击事件都会触发

标准的dom事件流:
捕获: window=>docuemtn=>body=>outer
日标: inner
冒泡:outer=>body=>docuemnt=>window

默认情况 只在冒泡触发
按照dom2事件绑定，并进行配置才能看到捕获的回调函数被触发

在执行事件时，整个标准事件流过程都会触发，只不过用dom0类型不能触发捕获只能进行冒泡的操作。要使用dom2类型的第三个参数，将其设置为true，用dom2类型给他们都绑上事件就能按照捕获的顺序执行。

当最上面一层的子元素被定位定到了其父元素的外面，他会触发整个dom事件流嘛？答案是会的。这里需要注意他不是遵循页面所看见的位置执行的，是根据DOM树来执行，不管这个子元素在哪里，只要点击他就会触发dom事件流。