事件冒泡和捕获

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

<div class="box1">
   <div class="box2">
   <div class="box3"></div></div>
</div>

css:

.box1{
		width: 200px;
		height:200px;
		background-color:red;
		position: relative;
	}
	.box2{
		width: 100px;
		height:100px;
		background-color: green;
		position: absolute;
		left: 0;
		top: 0;
	}
	.box3{
		width: 50px;
		height:50px;
		background-color:yellow;
		position: absolute;
		left: 0;
		top: 0;
	}

js:

var box1 = document.getElementsByTagName('div')[0];
var box2 = document.getElementsByTagName('div')[1];
var box3 = document.getElementsByTagName('div')[2];
box1.addEventListener('click',function(){
	console.log('box1')
},false);
 box2.addEventListener('click',function(){
	console.log('box2')
},false);
  box3.addEventListener('click',function(){
	console.log('box3')
},false);

事件冒泡和捕获

首先鼠标点击红色方块：打印box1
再点击绿色方块：打印box2 box1
最后点击黄色方块：打印box3 box2 box1
是结构上的嵌套，不是视觉上的，这样也是可以打印相同的结果出来
事件冒泡和捕获

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

把false改成true就是事件捕获模型

box1.addEventListener('click',function(){
    	console.log('box1');
    },true);
     box2.addEventListener('click',function(){
    	console.log('box2');
    },true);
      box3.addEventListener('click',function(){
    	console.log('box3');
    },true);

事件冒泡和捕获
点击红色方块：box1
点击绿色方块：box1 box2
点击黄色方块：box1 box2 box3

结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能。

触发顺序，先捕获，后冒泡

事件冒泡和捕获

特殊例子：
事件冒泡和捕获

顺序一定是先捕获后冒泡，这没有问题，但是黄色区域是两个事件执行，事件执行的顺序要符合先后顺序，黄色的是先绑定冒泡再捕获。
focus，blur，change，submit，reset，select 等事件不冒泡