SOURCE

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.addEventListener('click', function () {
    console.log("div1--捕获阶段")
}, true);
div2.addEventListener('click', function () {
    console.log("div2--捕获阶段")
}, true);
div1.addEventListener('click', function () {
    console.log("div1--冒泡阶段")
});
div2.addEventListener('click', function () {
    console.log("div2--冒泡阶段")
});

<div id="div1">
     <div id="div2">Div Area</div>
</div>

#div1{
    background: red;
    padding: 50px;
}
#div2{
    background: yellow;
    padding: 50px;
}