JS事件传播机制

事件流：
指从页面中接收事件的顺序，有冒泡流和捕获流。当页面中发生某种事件（比如鼠标点击，鼠标滑过等）时，毫无疑问子元素和父元素都会接收到该事件，可具体顺序是怎样的呢？冒泡和捕获则描述了两种不同的顺序。

*下面让我们一起走进代码的课堂

    <div id="outer">
		<div id="inner"></div>
	</div>
	<script type="text/javascript">
		var outer = document.getElementById("outer");
		var inner = document.getElementById("inner");
		function foo(){
			console.log("inner");
		}
		function bar(){
			console.log("111inner");
		}
		function aa(){
			console.log("outer");
		}
		//同时添加多个相同的事件，事件处理函数依次，不会覆盖
		//inner.addEventListener("click",foo,false);
		//inner.addEventListener("click",bar,false);
		//支持捕获
		inner.addEventListener("click",foo,true);
		outer.addEventListener("click",aa,true);
		//inner.removeEventListener("click",foo);
		//console.log([]==[]);
		
		/*inner.attachEvent("onclick",foo);
		inner.detachEvent("onclick",foo);*/
	
		//todo
		function addEvent(){
			
		}
		function removeEvent(){
			
		}
		
	</script>

效果如下：
在这里插入图片描述