事件冒泡和事件捕获

事件冒泡有空补充(印象笔记里)

事件捕获

浏览器默认,由里向外逐渐触发事件,这种行为叫做事件冒泡。

利用事件监听可以使浏览器,由外向里逐渐触发事件,这种行为叫做事件捕获。

事件流:
事件冒泡,由里向外逐渐触发事件。
事件捕获,由外向里逐渐触发事件。

代码示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件捕获</title>
        <style>
            div{padding: 50px}
            #div1{background-color: red}
            #div2{background-color: blue}
            #div3{background-color: orange}
        </style>
        <script>
            window.onload = function(){
                var aDivs = document.getElementsByTagName('div');
                for(var i = 0; i < aDivs.length; i++){
                    //通过事件监听的方式添加事件就会 看到的现象就会和事件冒泡的方向相反
                    aDivs[i].addEventListener("click", function(){
                        alert(this.id);
                    }, true);
                }

                /*
                    事件冒泡的浏览器兼容写法
                 */
/*
                function stopBubble(e){
                    if(e.cancelBubble){
                        e.cancelBubble = true;
                    }else{
                        e.stopPropagation();
                    }
                }
*/

                /*
                    阻止事件冒泡


                 */
            }
            /*
                上述的行为是浏览器的默认行为。
                浏览器默认,由里向外逐渐触发事件,这种行为叫做事件冒泡。

                事件流:
                事件冒泡,由里向外逐渐触发事件。
                事件捕获,由外向里逐渐触发事件。

             */
        </script>
    </head>
    <body>
        <div id = 'div1'>
            <div id = 'div2'>
                <div id = 'div3'></div>
            </div>
        </div>
    </body>
</html>

浏览器效果:

原文地址:https://www.cnblogs.com/taohuaya/p/9602021.html