关于dom:DOM事件流

2次阅读

共计 1170 个字符，预计需要花费 3 分钟才能阅读完成。

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

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

代码

<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

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

正文完