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

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

DOM事件流

DOM事件触发顺序

Demo

simonbaker

引用和评论

Linux上安装DVWA，小白也能上手