SOURCE

 var innerCircle= document.getElementById("inner");
    innerCircle.addEventListener("click", function () {
        alert("innerCircle的click事件在捕获阶段被触发");
    },true);
    innerCircle.addEventListener("click", function () {
        alert("innerCircle的click事件在冒泡阶段被触发");
    },false);
    var middleCircle= document.getElementById("middle");
    middleCircle.addEventListener("click", function () {
        alert("middleCircle的click事件在捕获阶段被触发");
    },true);
    middleCircle.addEventListener("click", function () {
        alert("middleCircle的click事件在冒泡阶段被触发");
    },false);
    var outerCircle= document.getElementById("outer");
    outerCircle.addEventListener("click", function () {
        alert("outerCircle的click事件在捕获阶段被触发");
    },true);
    outerCircle.addEventListener("click", function () {
        alert("outerCircle的click事件在冒泡阶段被触发");
    },false);

<div id="outer">
    <div id="middle">
        <div id="inner">
            click me!
        </div>
    </div>
</div>

 #outer {
   position: absolute;
   width: 400px;
   height: 400px;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   margin: auto;
   background-color: deeppink;
 }
 
 #middle {
   position: absolute;
   width: 300px;
   height: 300px;
   top: 50%;
   left: 50%;
   margin-left: -150px;
   margin-top: -150px;
   background-color: deepskyblue;
 }
 
 #inner {
   position: absolute;
   width: 100px;
   height: 100px;
   top: 50%;
   left: 50%;
   margin-left: -50px;
   margin-top: -50px;
   ;
   background-color: darkgreen;
   text-align: center;
   line-height: 100px;
   color: white;
 }
 
 #outer,
 #middle,
 #inner {
   border-radius: 100%;
 }