<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box1{
      width: 200px;
      height: 200px;
      background-color: yellowgreen;  
    }
 
    #s1 {
      background-color: yellow;
    }

  </style>

  <script>

    window.onload = function(){

      /**
       * 事件冒泡
       *   指事件向上传导 当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
       *   可以用 事件对象来阻止冒泡
      */
         
        var s1 = document.getElementById("s1"); 
        s1.onclick = function(event){
          event = event || window.event; 
          alert('我是span的点击响应函数') 
          // 取消冒泡
          // 可以将事件对象的 cancelBubble 设置为true 即可取消冒泡
          event.cancelBubble = true;

        }

        var box1 = document.getElementById("box1"); 
        box1.onclick = function(){
          alert('我是box1的点击响应函数')
        }

        // 为body 绑定一个单击响应函数
        document.body.onclick = function(){
          alert('我是body的点击响应函数')
        }


    }

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