JS捕获冒泡

<div id="outDiv">
    <div id="middleDiv">
        <div id="inDiv">请在此点击鼠标。</div>
    </div>
</div>
<div id="info"></div>

<script>
    // 先顶层捕获再往里层 true , 后从里层往外冒泡 false 
    // event.preventDefault(); 阻止默认行为
    // event.stopPropagation() 方法阻止事件冒泡到父元素,阻止任何父事件处理程序被执行
    window.onload = function () {
        var outDiv = document.getElementById("outDiv");
        var middleDiv = document.getElementById("middleDiv");
        var inDiv = document.getElementById("inDiv");
        var info = document.getElementById("info");
        outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, true);
        middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, false);
        inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, true);
    }
</script>