js中的事件传播

事件捕获指的是从document到触发事件的那个节点，是从外到内的触发事件。相反的，事件冒泡是从内到外的触发事件。事件绑定方法的第三个参数，就是控制事件触发顺序。true,事件捕获；false,事件冒泡。默认false,即事件冒泡

<style type="text/css">
#outer{
width: 200px;
height: 200px;
background: red;
}
#inner{
width: 100px;
height: 100px;
background: blue;
}
</style>
<div id="outer">
<div id="inner"></div>
</div>
<script type="text/javascript">
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");
//由内向外的DOM对象上的事件名一样
inner.addEventListener("click",function(e){
var evt = e || event;
console.log("inner");
})
outer.addEventListener("click",function(e){
var evt = e || event;
console.log("outer");
})
</script>

冒泡机制：先触发内部节点，后触发外部节点

inner.addEventListener("click",function(e){
var evt = e || event;
console.log("inner");
},true)
outer.addEventListener("click",function(e){
var evt = e || event;
console.log("outer");
},true)

当添加第三个参数为true时，传播顺序由外到内。

由于事件冒泡的存在，可以把原本想要绑定到子元素上的事件绑定到父元素上，当满足条件时触发事件，事件委托可以大量节省内存占用，减少事件注册，比如在ul上代理li的事件。即使新增子元素也无需再次对其绑定事件，非常适合动态内容。

<style type="text/css">
li{
background: red;
margin: 10px;
}
</style>
<ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<input type="button" value="更多" id="btn">
<script type="text/javascript">
var oList = document.getElementById("list");
var oBtn = document.getElementById("btn");
var aLi = oList.children;
oList.onclick = function(e){
var evt = e || event;
var _target = evt.target || evt.srcElement;
if(_target.nodeName.toLowerCase() == "li"){
console.log("aa");
}
}
oBtn.onclick = function(){
for(var i = 0; i < 5; i++){
var oLi = document.createElement("li");
oList.appendChild(oLi);
}
}
</script>