冒泡:

冒泡机制中,水泡从下往上升,经过不同层次的区域,最终到达最外层

冒泡机制在js中,气泡就相当于事件，而水则相当于整个dom树；事件从dom 树的底层层层往上传递，直至传递到dom的根节点。

捕获与冒泡原型图

IE 6.0:
div → body → html → document
其他浏览器
div → body → html → document → window
注意 : 不是所有的事件都能冒泡,以下事件不冒泡 : blur、focus、load、unload

事件传递示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #father{
            width: 600px;
            height: 600px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="father">
    <button id="btn">点我</button>
</div>
<script>
    var father = document.getElementById("father");
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        alert("按钮被点击了");
    };
    father.onclick = function () {
        alert("父标签被点击了");
    }
    document.onclick = function () {
        alert("document被点击了");
    }
</script>
</body>
</html>

按下按钮会发现出现

点确定后紧接着弹出

以上就是一个简单的事件传递案例了

阻止:

通常情况下我们明确自己的事件触发源，并不希望浏览器自作聪明、漫无目的地去帮我们找合适的事件处理程序，即我们明确最精准目标，这种情况下我们不需要事件冒泡。另外通过对事件冒泡的理解，我们知道程序将做多较多额外的事情，这必然增大程序开销。还有一个重要的问题是：事件冒泡处理可能会激活我们本来不想激活的事件，导致程序错乱，甚至无从下手调试，这常成为对事件冒泡不熟悉程序员的棘手问题。所以必要时，我们要阻止事件冒泡。

标准浏览器和ie浏览器
w3c : event. stopPropagation()
IE : event. cancelBubble= true
兼容的写法

    if (event && event.stopPropagation) {//w3c标准
        event.stopPropagation();
    } else {//IE 6/7/8
        event.cancelBubble = true;
    }

想到哪个元素后阻止就写在哪个元素中

应用案例:

蒙版效果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            /*设置高度为3000为了使网页可以滚动*/
            height: 3000px;
        }

        #panel {
            width: 100%;
            height: 100%;
            background-color: black;
            opacity: 0.3;
            /*兼容ie的透明度,面试可能问到,数值为百倍*/
            filter: alpha(opacity:30);
            /*绝对定位跳出普通流*/
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        #login {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            border-radius: 5px;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -150px;
            display: none;
            text-align: center;
            line-height: 300px;
        }
    </style>
</head>
<body>
<button id="btn">立即登录</button>
<div id="panel"></div>
<div id="login">
    这里是登录信息哦!
</div>
<script src="js/myFunc.js"></script>
<script>
    window.onload = function () {
        //监听"立即登录"按钮
        $("btn").onclick = function (event) {
            //阻止冒泡,否则按下立即登录时直接会让下面代码的document.onclick生效,导致样式失效
            if (event && event.stopPropagation) {//w3c标准
                event.stopPropagation();
            } else {//IE 6/7/8
                event.cancelBubble = true;
            }

            //显示蒙版和面板
            $("panel").style.display = "block";
            $("login").style.display = "block";
            //当蒙版效果出现时,让网页不能再滚动
            document.body.style.overflow = "hidden";
        }

        //监听点击蒙版区域时,显示网页原来样式;但是点击登录面板时,不会取消样式,所以此时需要使用事件对象
        document.onclick = function (event) {
            var e = event || window.event;
            //获取点击的标签(问号后兼容ie)
            var targetId = e.target ? e.target.id : e.srcElement.id;
            //判断
            if (targetId !== "login") {
                $("panel").style.display = "none";
                $("login").style.display = "none";
                document.body.style.overflow = "auto";
            }
        }
    }
</script>
</body>
</html>