SOURCE

var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
var four = document.getElementById("four");
alert(one);
console.info("999999", one);
one.addEventListener(
  "click",
  function() {
    alert("one, bubble");
  },
  false
);

two.addEventListener(
  "click",
  function() {
    alert("two, bubble");
  },
  false
);

two.addEventListener(
  "click",
  function() {
    alert("two, capture");
  },
  true
);

one.addEventListener(
  "click",
  function() {
    alert("one, capture");
  },
  true
);
// 看��
///////////////////////////////////////////////
three.addEventListener(
  "click",
  function() {
    alert("three");
  },
  true
);
four.addEventListener(
  "click",
  function() {
    alert("four");
  },
  false
);

<div id='one'>
  <div id='two'>
    <div id='three'>
      <div id='four'>
      </div>
    </div>
  </div>
</div>

#one {
  width: 500px;
  height: 500px;
  background: grey;
}

#two {
  width: 400px;
  height: 400px;
  background: blue;
}
#three {
  width: 300px;
  height: 300px;
  background: green;
}

#four {
  width: 200px;
  height: 200px;
  background: pink;
}