<div id="grandparent">
    <div id="father">
      <div id="child"></div>
    </div>
  </div>

#child{
    background: red;
    width:50px;
    height:50px;
  }
  #father{
    width:100px;
    height:100px;
    background:green;
  }
  #grandparent{
    width:150px;
    height:150px;
    background:black;
    margin:20px auto 0;
  }

  // alert弹出直观测试，也可以改成console调试台查看
var grandparent = document.getElementById("grandparent");
  var parent = document.getElementById("father");
  var child = document.getElementById('child');
  var html = document.getElementsByTagName("html")[0];
  var body = document.body;
  child.onclick = function () {
    alert("我是儿子");//console.log("我是儿子");
  }
  parent.onclick = function () {
    alert("我是父亲");//console.log("我是父亲");
  }
  grandparent.onclick = function () {
    alert("我是爷爷");//console.log("我是爷爷");
  }
 
  window.onclick = function () {
    console.log("我是window");//alert("我是window");
  }
  document.onclick = function () {
    console.log("我是document");// alert("我是document");
  }
  html.onclick = function () {
    console.log("我是html");//alert("我是html");
  }
  body.onclick = function () {
    alert("我是body");//console.log("我是body");
  }