DOM 事件流
这里规定的事件流有三个阶段： 事件捕获阶段，目标阶段，事件冒泡阶段。
默认false 是冒泡阶段捕获
事件流
我们知道，DOM是个树形结构，当我们在页面上单击一个按钮，页面上哪些元素会触发这个事件，是发生在这个按钮上，还是这个按钮的容器元素（我们说父元素）也会触发这个点击事件呢？ 这就牵扯到事件流，从上面的思考，我们知道它描述的是事件触发顺序，那上文中是按钮和其容器元素都触发吗，它们谁先触发呢？这可不是确定的，得看是哪种类型的事件流了。
1、事件冒泡
事件冒泡是IE 的事件流，事件是由最具体的元素接收，然后逐级向上传播，在每一级的节点上都会发生，直到传播到document对象，向Chrome这样的浏览器会冒泡到window 对象（很容易记忆，联想水里的泡泡不也这样么）。
冒泡：点击div会触发父盒子上的监听事件
从内层捕获
<div class="classv">
我是祖宗
<div class="actva">我是老爸
<div class="foo">我是孩子</div>
</div>
</div>
<script type="text/javascript">
var a = document.querySelector('.classv').addEventListener('click', function() {
console.log('我是祖宗')
}, false)
var b = document.querySelector('.actva').addEventListener('click', function() {
console.log('我是老爸')
}, false)//如果把这里改成true 打印顺序是我是老爸 我是孩子 我是祖宗，
//因为是先捕获再冒泡，这里的布尔值只是决定事件在哪个过程中能被触发
var c = document.querySelector('.foo').addEventListener('click', function() {
console.log('我是孩子')
}, false)
</script>
2、事件捕获
事件捕获是Netscape浏览器开发团队提出的，很有意思，他们思想和IE 的截然相反。也就是说，从不具体的节点到最具体的节点，一般是从document对象开始传播，不过很少人用事件捕获的，还是事件冒泡用的多。
阻止冒泡
可以调用事件对象下的方法stopPropagation()
var c = document.querySelector('.foo').addEventListener('click', function(e) {
console.log('我是孩子')
e.stopPropagation()
}, false)
return false;
事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才执行超链接的跳转）
事件代理
什么是事件委托？
事件委托，又称事件代理，就是将元素的事件处理交由父元素或者祖先元素来代为执行；
事件委托利用了事件冒泡，只指定一个事件处理程序（函数），就可以管理某一类型的所有事件
。
例如：我们只需要在document上绑定一个onclick事件，就可以通过事件冒泡的特性来处理一整个页面上所有的onclick事件，而不必给每一个元素去绑定onclick事件；当然这只是举个栗子，我们正常情况下绝对不会这么去做的。
为什么要用事件委托？
在javascript进行事件处理的时候，每个添加到页面上的事件函数都将直接影响页面的整体性能，每一个函数都是一个对象，都会占用内存，而内存中的对象越多，性能就越差。而为了解决这种问题，我们就需要使用事件委托。
事件委托的优点
- 只在内存中开辟了一块空间，节省资源同时减少了dom操作，提升整体性能；
- 在页面中设置事件处理程序的时间大大减少了；
- 对于新添加的元素也会有之前的事件；
- 不需要对事件委托的元素手动移除事件处理程序。
举个栗子
不利用事件委托的时候利用循环来为事件添加重复的事件
<body>
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
</body>
<script>
let myul=document.getElementById('ul1');
let myli=myul.getElementsByTagName('li');
console.log(myli);
console.log(myli[0]);
// myli[0].addEventListener('click',function(){console.log('im li');})
for(var i=0;i<myli.length;i++){
console.log(myli[i]);
myli[i].addEventListener('click',function(){console.log(this.innerHTML);})
}
</script>
利用事件委托后：
myul.addEventListener('click',trig)
function trig(e){
// console.log(e);
// console.log(e.target);
// console.log(e.srcElement);
console.log(e.target.nodeName.toLocaleLowerCase());
// e = e||window.event;
let target = e.target||e.srcElement;
if(target.nodeName.toLocaleLowerCase()=='li'){
console.log(e.target.innerHTML);//实际点击的元素
console.log(e.currentTarget);
console.log(e.srcElement);
console.log(e.target);
//window.event.srcElement与window.event.target 都是指向触发事件的元素
//IE浏览器支持window.event.srcElement ， 而firefox支持window.event.target；
}
}
注意下e.currentTarget是监听事件者
e.srcElement，e.target 都是指向触发事件的元素
IE浏览器支持window.event.srcElement ， 而firefox支持window.event.target；
可以再多看一个栗子
不使用事件委托时：
let myTable = document.getElementById('table');
let myTBody = myTable.getElementsByTagName('tbody')[0];
let myBtn = document.getElementById('btn');
let delBtns = myTBody.getElementsByTagName('button');
let id = 2;
for(let i = 0; i < delBtns.length; i++) {
delBtns[i].onclick = function() {
let tr = this.parentNode.parentNode;
myTBody.removeChild(tr);
}
}
事件委托的实现
将button的事件代理到table上，在事件处理程序内部通过event事件对象的target属性配合switch语句来确保当前点击的是button，当点击button的时候，执行删除操作；这里用switch的原因是为了还可以再同时判断多个target
当然了，实际使用的时候，我们一般不使用target.tagName，因为直接使用标签名容易导致冲突，所以我们实际使用时一般都使用className来进行判断
myTable.onclick = function(e) {
let event = e || window.event;
let target = event.target || event.srcElement;
//这两行应该是用来解决兼容性问题的
let tagName = target.tagName;
switch (tagName) {
case 'BUTTON':
let myTr = target.parentNode.parentNode;
myTr.parentNode.removeChild(myTr);
break;
default:
break;
}
/* 假设当前删除按钮的类名为del
let className = target.className;
switch (className) {
case 'del':
let myTr = target.parentNode.parentNode;
myTr.parentNode.removeChild(myTr);
break;
default:
break;
}
*/
};
