事件处理模型——事件冒泡事件捕获

Posted 2020-11-24 hjysunshine

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件处理模型——事件冒泡事件捕获相关的知识，希望对你有一定的参考价值。

事件冒泡：

　　结构上，（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）

事件捕获：

　　结构上，（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获向子元素。（自顶向下）

　　IE没有捕获事件

触发顺序，先捕获，后冒泡

focus, blur, change, submit, reset, select 等事件不冒泡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .a {
                width: 500px;
                height: 500px;
                background-color: #00008B;
            }
            .b {
                width: 400px;
                height: 400px;
                background-color: #00FFFF;
            }
            .c {
                width: 300px;
                height: 300px;
                background-color: #FFA500;
            }
        </style>
    </head>
    <body>
        <div class="a">
            <div class="b">
                <div class="c">
                    
                </div>
            </div>
        </div>
        <script type="text/javascript">
            var a = document.getElementsByClassName(‘a‘)[0];
            var b = document.getElementsByClassName(‘b‘)[0];
            var c = document.getElementsByClassName(‘c‘)[0];

            //第三个参数为false, 为冒泡事件
            a.addEventListener(‘click‘, function () {
                console.log(‘aBubble‘)
            }, false)
            b.addEventListener(‘click‘, function () {
                console.log(‘bBubble‘)
            }, false)
            c.addEventListener(‘click‘, function () {
                console.log(‘cBubble‘)
            }, false)

　　　　　　　// 将 false 改为 true , 为捕获事件
            a.addEventListener(‘click‘, function () {    
                console.log(‘aCatch‘)
            }, true)
            b.addEventListener(‘click‘, function () {
                console.log(‘bCatch‘)
            }, true)
            c.addEventListener(‘click‘, function () {
                console.log(‘cCatch‘)
            }, true)
        </script>
    </body>
</html>

运行代码，点击 c 的输出结果为：

aCatch
bCatch
cBubble
cCatch
bBubble
aBubble

可以看出，是先执行了捕获事件，再执行冒泡事件，而被点击的对象 c 则按事件的调用顺序执行。

以上是关于事件处理模型——事件冒泡事件捕获的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript事件：事件处理模型(冒泡捕获)