<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>