一、事件流
1、事件冒泡
IE事件流被称为事件冒泡。例如在div元素中触发click事件，其click事件会沿着DOM数一路向上，在经过的每个节点上依次触发直到documen对象。现代浏览器中的事件会一直冒泡到window对象，如图所示。
2、事件捕获
Netscape Communication团队提出了事件捕获的事件流。而事件捕获中，同事件冒泡流区别在于其click事件是由document元素捕获，然后沿DOM树依次向下传播直达目标元素div，如图所示。
3、DOM事件流
按照规范事件流分为三个阶段：事件捕获，达到目标和事件冒泡。
1、事件捕获：当某个元素触发某个事件，顶层对象document就会发出一个事件流，随着dom树的节点向目标元素节点流去，直到到达事件真正发生的目标元素，在这个过程中，事件相应的监听函数是不会被触发的
2、事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数，如果没有绑定监听函数，那就不执行
3、事件冒泡：从目标元素开始，往顶层元素传播，途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发，如果想阻止事件冒泡，可以使用event.stopPropgation()或者event.cancelBubble=true来阻止事件的冒泡传播
4、事件流的阻止
stopPropagation()
//既可以阻止事件冒泡，也可以阻止事件捕获，也可以阻止处于目标阶段
stopImmediatePropagation()
//既可以阻止事件冒泡，也可以阻止事件捕获，还会阻止该元素其他事件的发生
二、事件绑定和解绑
1、事件绑定
a、html中直接绑定——html中绑定事件叫做内联绑定事件，不利于分离
b、js中直接绑定——js中直接绑定称为赋值绑定函数，缺点是只能绑定一次
//事件监听，绑定
target.addEventListener(type, listener[, useCapture])
参数说明：
1、target表示要监听事件的目标对象，可以是一个文档上的元素DOM本身，Window或者XMLHttpRequest
2、type表示事件类型的字符串
listener为当指定的事件类型发生时被通知到的一个对象
useCapture为设置事件的捕获或者冒泡
true为捕获，false为冒泡(默认)
3、addEventListener可以给同一个dom元素绑定多个函数，并且执行顺序按照绑定顺序执行，且执行顺序与useCapture无关
4、给一个dom元素绑定同一个函数，最多只能绑定useCapture类型不同的两次
5、addEventListener只支持到IE9，为兼容性考虑，在兼容IE8及一下浏览器可以用attachEvent函数，和addEventListener函数表现一样，但它绑定函数的this会指向全局
2、事件解绑
a、通过dom的on***属性设置的事件，可以用dom.onclick = null来解绑
b、通过addEventListener绑定的事件可以使用removeEventListener来解绑，接受参数一样
c、对于使用removeEventListener函数解绑事件，需要传入的listener，useCapture和addEventListener完全一致才可以解绑事件
三、事件委托和事件代理
1、事件委托和事件代理的理解
什么是事件委托？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件，当我们需要对很多元素添加事件的时候，可以通过事件添加到他们的父节点二将时间委托给父节点来触发处理函数。
2、使用事件委托的优点
一般来说，dom需要有事件处理程序，我们都会直接给它设置事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们这里有100个li，每个li都有相同的click事件，那么我们会用for循环的方法来遍历所有的li，然后给他们添加事件，那么这样会存在什么问题呢？
在JavaScript中，添加到页面上的事件处理程序的数量将直接关联到页面整体的运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数就越多，就会延长整个页面交互就绪时间，这就是为什么性能优化的主要思想是减少dom操作的原因，如果使用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能。
每个函数都是一个对象，是对象就会占用内存，内存占用率就越大，自然性能就差了，比如上面的100个li，就要占用100个内存空间，如果是1000个，10000个呢，如果使用事件委托，那么我们就可以只对它的父级这一个对象（如果只有一个父级）进行操作，这样我们就需要一个内存空间就够了，是不是省了很多，自然性能就会更好。
3、事件委托的原理实现
事件委托是利用事件的冒泡机制来实现的，Event对象提供了一个属性叫target，可以返回事件的目标节点，我们称为事件源，也就是说，target就可以表示为当前事件操作的dom，但是不是真正操作的dom。标准浏览器用event.target，此时知识获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，一般转化为小写再进行比较
如果你想将事件委托给父元素来处理，但每个子元素的事件内容又不相同时，这里我们可以给每个子元素添加一个唯一的key来作标识，然后在父元素中对其进行分别的处理，例如：
const list = document.querySelector('#list)
const lists = list.querySelector('#list > li')for(let i=0; i<lists.length; i++){
lists[i].dataset.key = 'list-' + i
}
list.addEventListener('click',function(e){
const event = e || window.event
const target = event.target || event.srcElement
if(target.nodeName.toLocaleLowerCase() === 'li'){
switch(target.dataset.key){
case 'list-1':
do something-1
break
case 'list-2':
do something-2
break
default:
do something-3
break }
}
})
