JS之事件处理模型——事件冒泡、事件捕获

1、事件冒泡
    结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素（自底向上）

<div class="wrapper">
	 	<div class="content">
	 		<div class="box">
                        </div>
	 	</div>
</div>
	<script type="text/javascript">
		var wrapper = document.getElementsByClassName('wrapper')[0];
		var content = document.getElementsByClassName('content')[0];
		var box = document.getElementsByClassName('box')[0];

		wrapper.addEventListener('click',function(){
			console.log('wrapper');
		},false);
		content.addEventListener('click',function(){
			console.log('content');
		},false);
		box.addEventListener('click',function(){
			console.log('box');
		},false);
</script>

 css代码：

                .wrapper{
			width: 300px;
			height: 300px;
			background-color: red;
		}
		.content{
			width:200px;
			height: 200px;
			background-color: green;
		}
		.box{
			width:100px;
			height: 100px;
			background-color: orange;

		}

当我们依次点击橘色和绿色的区域的时候，他们都会一级一级的冒泡到他们的父元素。从代码的视觉上是自底向上的。

。

为了验证是结构上的嵌套关系不是视觉上的嵌套关系。我们将CSS代码稍作修改

                .wrapper{
			width: 300px;
			height: 300px;
			background-color: red;
		}
		.content{
			margin-left: 300px;
			width:200px;
			height: 200px;
			background-color: green;
		}
		.box{
			margin-left: 200px;
			width:100px;
			height: 100px;
			background-color: orange;

然后依次点击box、content、wrapper三个部分得到相同结果：

2、事件捕获
    结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）
    IE没有捕获事件

<div class="wrapper">
	 	<div class="content">
	 		<div class="box">
                        </div>
	 	</div>
</div>
	<script type="text/javascript">
		var wrapper = document.getElementsByClassName('wrapper')[0];
		var content = document.getElementsByClassName('content')[0];
		var box = document.getElementsByClassName('box')[0];

		wrapper.addEventListener('click',function(){
			console.log('wrapper');
		},true);
		content.addEventListener('click',function(){
			console.log('content');
		},true);
		box.addEventListener('click',function(){
			console.log('box');
		},true);
</script>

CSS代码：

                .wrapper{
			width: 300px;
			height: 300px;
			background-color: red;
		}
		.content{
			width:200px;
			height: 200px;
			background-color: green;
		}
		.box{
			width:100px;
			height: 100px;
			background-color: orange;

		}

依次点击box、content、wrapper区域，每一次点击时，子元素的父级会先捕获到信息，然后再冒泡到子元素。

触发顺序，一定是先捕获，后冒泡

<script type="text/javascript">
		var wrapper = document.getElementsByClassName('wrapper')[0];
		var content = document.getElementsByClassName('content')[0];
		var box = document.getElementsByClassName('box')[0];
		// 事件冒泡
		wrapper.addEventListener('click',function(){
			console.log('wrapper');
		},true);
		content.addEventListener('click',function(){
			console.log('content');
		},true);
		box.addEventListener('click',function(){
			console.log('box');
		},true);
		wrapper.addEventListener('click',function(){
			console.log('wrapperBb');
		},false);
		content.addEventListener('click',function(){
			console.log('contentBb');
		},false);
		box.addEventListener('click',function(){
			console.log('boxBb');
		},false);
</script>

<script type="text/javascript">
		var wrapper = document.getElementsByClassName('wrapper')[0];
		var content = document.getElementsByClassName('content')[0];
		var box = document.getElementsByClassName('box')[0];
		// 事件冒泡
		wrapper.addEventListener('click',function(){
			console.log('wrapperBb');
		},false);
		content.addEventListener('click',function(){
			console.log('contentBb');
		},false);
		box.addEventListener('click',function(){
			console.log('boxBb');
		},false);
		wrapper.addEventListener('click',function(){
			console.log('wrapper');
		},true);
		content.addEventListener('click',function(){
			console.log('content');
		},true);
		box.addEventListener('click',function(){
			console.log('box');
		},true);
		
</script>

这里我们发现点击box时先出现boxBb，这是因为点击box时先捕获wrapper区域，再捕获content区域，然后是box区域的事件执行，然后依次向父级冒泡。box区域有两个事件执行，事件执行的先后顺序是谁先绑定先执行谁。因此出现这个结果。