关于dom:DOM事件流

文章不易，请关注公众号毛毛虫的小小蜡笔，多多反对，谢谢。

DOM事件触发程序

遵循两个准则：
1、先触发捕捉阶段，而后到指标阶段，最初到冒泡阶段
2、指标阶段，依照代码程序来触发，不辨别捕捉和冒泡

Demo

代码

<head>    <meta charset="utf-8">    <title>事件流</title>    <style>        #a {            width: 100px;            height: 100px;            background: black;            margin: auto;        }        #b {            width: 60px;            height: 60px;            background: red;        }        #c {            width: 30px;            height: 30px;            background: green;            display: inline-block;        }</style></head><body>    <div id="a">        <div id="b">            <div id="c"></div>        </div>    </div>    <script>        var aObj = document.getElementById('a')        var bObj = document.getElementById('b')        var cObj = document.getElementById('c')        aObj.addEventListener('click', function (evt) {            console.log('a1')        }, true)        aObj.addEventListener('click', function (evt) {            console.log('a2')        }, false)        bObj.addEventListener('click', function (evt) {            console.log('b1')        }, true)        bObj.addEventListener('click', function (evt) {            console.log('b2')        }, false)        cObj.addEventListener('click', function (evt) {            console.log('c1')        }, true)        cObj.addEventListener('click', function (evt) {            console.log('c2')        }, false)        cObj.addEventListener('click', function (evt) {            console.log('c3')        }, true)        cObj.addEventListener('click', function (evt) {            console.log('c4')        }, false)</script></body>

成果如下截图所示：

当点击绿色区域，输入程序是这样的：
a1,b1,c1,c2,c3,c4,b2,a2

其实，依据下面说的准则来判断就能够。
1、先触发捕捉阶段，所以先输入a1和b1

详情请查看：毛毛虫的小小蜡笔