- 事件的冒泡（Bubble）
    - 事件的冒泡指的是事件向上传导，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发。
    - 事件的冒泡大部分情况下都是有益的，如果需要取消冒泡，则需要使用事件对象来取消
    - 可以将事件对象的cancelBubble设置为true，即可取消冒泡
        - 例子：
                元素.事件 = function(event){
                    event = event || window.event;
                    event.cancelBubble = true;
                };
 
 
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1{
                height: 400px;
                width: 400px;
                background-color: lightblue;
            }
            
            .box2{
                height: 200px;
                width: 200px;
                background-color: hotpink;
            }
            
        </style>
        <script type="text/javascript">
            window.onload = function(){
                document.querySelector(".box1").onclick = function(){
                    alert("父元素");
                }
                
                document.querySelector(".box2").onclick = function(event){
                    event = event || window.event;
                    // 取消冒泡
                    event.cancelBubble = true;
                    alert("子元素");
                }
            }
        </script>
    </head>
    <body>
        <div class="box1">
            <div class="box2"></div>
        </div>
    </body>
</html>