js——事件冒泡与捕获小例子

布局代码

#outer{
    width: 300px;
    height: 300px;
    background: red;
}
#inner{
    width: 200px;
    height: 200px;
    background: green;
}

<div id="outer">
    <div id="inner"></div>
</div>

js测试代码

var inner = document.getElementById("inner");
var outer = document.getElementById("outer");
inner.addEventListener("click", function(e){
    alert("inner");
}, true);
outer.addEventListener("click", function(e){
    alert("outer");
}, true);
document.addEventListener("click", function(e){
    alert("document");
}, true);

鼠标点击下图绿色部分，addEventListener最后一个参数的设置(是否用capture)：

• true捕获，依次出现：document—>outer—>inner
• false冒泡，依次出现：innert—>outer—>document