事件冒泡与事件捕获
引言：用户在浏览器操作的时候触发的一种行为就叫事件。
每个元素自身都有事件，只不过默认为null（没有事件，事件值就为undefined），当某个事件绑定一个函数之后，用户在操作浏览器的时候触发了这个事件，就会执行这个事件函数。
什么是事件冒泡和捕获呢？
来看一张图（简单明了~）
由上图我们可以得知
事件冒泡就是从目标元素自下而上一直到window（结束）这样一个过程
事件捕获就是从window自上而下一直到目标元素的这样一个过程
一般是先执行捕获，后执行冒泡
关于冒泡：
① DOM0，DOM2都有冒泡行为
② 目标元素和祖先元素绑定同一事件时候，目标元素触发的同时祖先元素也会执行这一事件
来，看个小栗子
DOM0 事件冒泡
window.onclick = function(){ alert('window'); } box1.onclick = function(){ alert('第一个'); }; box2.onclick = function(){ alert('第二个'); }; box3.onclick = function(){ alert('第三个'); }; //点击 box3分别会由下而上 弹第三个，第二个，第一个，window
DOM2 事件冒泡 div1.addEventListener('click',function(){ alert('red'); },false); div2.addEventListener('click',function(){ alert('green'); },false); btn.addEventListener('click',function(){ alert('按钮'); },false); //依次输出 按钮 -> green -> red
以上分别是DOM0和DOM2中的冒泡
冒泡的优点可以通过事件对象的target捕获到事件源是哪个元素，从而提高性能
但在开发中也会遇到冒泡带来的弊端（由于冒泡机制，子元素触发事件时候也会影响父元素和祖先元素）
比如以下效果：
let onOff = true; btn.onclick = function(ev){ if(onOff){ box.style.display = 'none'; }else{ box.style.display = 'block'; } onOff = !onOff; } document.onclick = function(){ box.style.display = 'none'; onOff = false; }
问题：点击按钮隐藏红色背景，再次点击按钮时候红色背景应该显示。但因为冒泡的特性，执行完按钮的onclick事件函数，还会执行document，所以再次点击按钮是没有反映的
解决方法：使用stopPropagation() 和 cancelBubble阻止冒泡的发生
let onOff = true; btn.onclick = function(ev){ if(onOff){ box.style.display = 'none'; }else{ box.style.display = 'block'; } onOff = !onOff; // ev.stopPropagation(); ev.cancelBubble = true; //阻止了btn的onclick的事件不往上面冒泡。 } document.onclick = function(){ box.style.display = 'none'; onOff = false; }
其中ev.stopPropagation是W3C标准写法，IE低版本不支持
ev.cancelBubble = true;这个方法虽然不是标准方法，但大多数浏览器都支持...
注意：开发中如果两个元素是嵌套关系就要小心时间冒泡了，名称尽量不要重复
关于捕获：
① DOM0是检测不到捕获的，只有DOM2/3才能捕获到
② addEventListener/removeEventListener中的布尔值默认都是false不捕获
div1.addEventListener('click',function(){
alert('red');
},true);
div2.addEventListener('click',function(){
alert('green');
},true);
btn.addEventListener('click',function(){
alert('按钮');
},true);
//点击btn依次输出 red -> green -> 按钮
事件流（模型）
当一个事件触发时，一般会经历三个过程。即捕获阶段（window由上而下到目标元素）、目标阶段、冒泡阶段（目标元素由下而上到window），这么个过程称为事件流（事件模型）
其中目标阶段，他是按照事件绑定的先后顺序，而不是按照先捕获后冒泡这一规则来执行
下面是事件流的一些小测试
div1.addEventListener('click',function(){
console.log('red');
},true);
div2.addEventListener('click',function(){
console.log('green');
},false);
btn.addEventListener('click',function(){
console.log('按钮');
},false);
function fn(){ console.log('tred');}
btn.addEventListener('click',function(){
console.log('按钮2');
},false);
div2.addEventListener('click',function(){
console.log('tgreen');
},true);
div1.addEventListener('click',fn,true);
div1.addEventListener('click',function(){
console.log('red');
},false);
btn.addEventListener('click',function(){
console.log('t按钮');
},true);
div2.addEventListener('click',function(){
console.log('green');
},false);
btn.addEventListener('click',function(){
console.log('按钮');
},false);
//点击btn依次会输出下面结果
//red->tred->tgreen->按钮->按钮2->t按钮->按钮->green->green->red
PS：下面说下DOM0和DOM2 （木有DOM1...）
DOM0就是传统的事件，比如以on开头。DOM0检测不到事件捕获行为
DOM2有两个方法来处理事件：绑定 -> addEventListener()、解绑 -> removeEventListener()
绑定事件方法：
/* 第一个参数：不带on的事件名称 第二个参数：事件函数 第三个参数：布尔值，是否捕获。默认false不捕获 */ ele.addEventListener("不带on的事件名","事件函数","是否捕获")
解绑事件方法：
/* 第一个参数：不带on的事件名称 第二个参数：解绑的事件函数 第三个参数：布尔值，是否捕获。默认false不捕获 */ ele.removeEventListener("不带on的事件名","解绑事件函数","是否捕获")
除了上面的两种方法，还有IE下面的两个绑定、解绑方法
attachEvent('带on事件名',‘事件函数’)
detachEvent('带on事件名',‘事件函数’)
注意：这里的第一个参数是带on的事件名
