js中的事件传播

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>