事件的冒泡(Bubble)

所谓的冒泡指的是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡。
—-取消冒泡，可以将事件对象的cancelBubble设置为true，即可取消冒泡。比如：event.cancelBubble=true;

如下代码就是事件的冒泡。
body代码如下：

<body id="body">
        <div id="box1">
            我是box1
            <span id="s1">我是span</span>
        </div>
</body>

js和css如下：

<style>
            #box1 {
                width: 200px;
                height: 200px;
                background-color: yellowgreen;
            }
            #s1{
                background-color: yellow;
            }
</style>
<script>
            window.onload=function(){
                var s1=document.getElementById("s1");
                var box1=document.getElementById("box1");
                s1.onclick=function(){
                    alert("我是span的单击响应函数");
                }
                box1.onclick=function(){
                    alert("我是box1的单击响应函数");
                }
                document.body.onclick=function(){
                    alert("我是body的单击响应函数");
                }
            };
</script>

如上代码可以看到，分别给三个具有父子关系的元素绑定了一个单击响应函数，点击span元素时，会依次弹出alert(“我是span的单击响应函数”);、alert(“我是box1的单击响应函数”);、alert(“我是body的单击响应函数”);三个提示框，单击div元素时，也会依次弹出alert(“我是box1的单击响应函数”);、alert(“我是body的单击响应函数”);两个个提示框，这就是事件的冒泡。

上面代码如果要取消第一个的冒泡，修改如下js代码即可

s1.onclick=function(event){
                    event=event||window.event;
                    event.cancelBubble=true;
                    alert("我是span的单击响应函数");
}

div跟随鼠标移动练习中取消一个div的移动事件的冒泡

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #btn1 {
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                /*要使用js偏移量使其移动，必须设置定位*/
            }
            #topdiv{
                 width: 300px;
                height: 300px;
                background-color: aquamarine;
            }
            #body{
                height: 1500px;
                margin: 0px;
            }
        </style>
        <script>
            window.onload=function(){
                var box1=document.getElementById("btn1");
                var box2=document.getElementById("topdiv");
                document.onmousemove=function(event){
                    event=event||window.event;
                    var x=event.pageX;
                    var y=event.pageY;
                    box1.style.left=x+"px";
                    box1.style.top=y+"px";
                };
                  box2.onmousemove=function(event){
                    event=event||window.event;
                    event.cancelBubble=true;
                };
            };
        </script>
    </head>
    <body id="body">
        <div id="topdiv"></div>
        <div id="btn1"></div>
    </body>
</html>