一、绑定事件的3种方式
1、内联绑定事件
2、on+事件名，绑定事件程序
3、通过addEventListener／removeEventListener绑定事件
不支持ie9之前的浏览器，ie9之前浏览器可以通过attachEvent／detachEvent绑定事件
这两种处理事件的方法有两个区别：
1、获取事件对象不同：attachEvent需要通过window对象来调用事件对象
2、获取节点不同：attachEvent事件中需要通过读取srcElement来获取，addEventListener通过target
3、处理阻止冒泡和阻止默认事件不同：阻止冒泡一个通过事件对象调用stopPropagation方法，一个通过设置事件对象的cancleBubble为true；
阻止默认行为一个通过事件对象调用preventDefault方法，一个通过设置事件对象的returnValue为false。
二、事件处理的流程
事件处理程序绑定的事件只要冒泡阶段。
addEventListener绑定的事件有捕获和冒泡两个阶段
捕获阶段：事件触发从window到目标对象
冒泡阶段：事件触发从目标对象到window传播
addEventListener这个方法的第三个参数默认为false，触发事件时先捕获再冒泡，如果设置这个参数为true则没有冒泡阶段。
addEventListener可以给一个元素同时绑定多个事件，如果同时注册冒泡和捕获事件，则按注册顺序执行。
三、事件代理
事件代理就是利用事件冒泡的原理，通过在父元素上绑定事件，来代替在每个子元素上绑定事件，节省了大量重复的事件监听。
参考资料：
文档对象模型事件：https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event
前端工程师手册：https://leohxj.gitbooks.io/front-end-database/javascript-basic/events.html
https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Events