首页 > 其他 > 详细

事件冒泡和事件捕获

时间:2018-09-07 00:16:10      阅读:169      评论:0      收藏:0      [点我收藏+]

 

 

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

 

 

事件捕获

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

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

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

代码示例

<!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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!