事件处理模型
- 事件处理模型分为两种，一种是事件冒泡，一种是事件捕获，事件处理模型会发生在这种情况下: 当含有嵌套的标签时，各个标签上绑定了相同的事件，例如都绑定了onclick事件，那么当点击事件发生的时候就会触发我们的事件模型
事件冒泡
- 从嵌套的子元素像最外层的父元素的冒泡，依次触发从子元素到最外层父元素经过的每一层标签绑定的同一事件，包括最外层的元素
事件捕获
- 事件捕获和时间冒泡恰恰相反，是从最外层向内部捕获，依次触发从最外层父元素到该子元素经过的每一层标签绑定的同一事件，包括最外层
事件模型的确定
默认的话只有事件冒泡，如果我们要实现事件捕获的话，请看下面的代码
var div = document.getElementsByTagName('div')[0]
div.addEventListener('click', function () {
}, true)将第三个参数设置为true，那么该事件就会实现事件捕获，默认为false，即事件冒泡
注意:
- 他们的触发顺序是先捕获，再冒泡，即先从最外层向内捕获，当到达的该子元素的时候，该子元素会执行绑定的事件，然后再依次向上冒泡，这里还需要注意的是前面说的是子元素先执行，也就是说如果如果该子元素对同一个事件分别绑定了两个事件处理模型分别为冒泡和捕获的，而且是前者在代码顺序上先绑定，那么当代码执行到该子元素的时候，理论上是先捕获再冒泡，但是由于事件执行的时候，是按照绑定的顺序执行的，所以这里会先冒泡再捕获，再往上冒泡。
- IE没有捕获事件，focus，blur，change，submit，reset，select 等事件不冒泡
事件对象
- 浏览器会在我们执行事件的时候，默认给我们封装一个对象event，里面包含了该事件执行时刻的一些相关信息，但对于IE他的事件对象是window.event。
事件源对象
- 事件源对象指的是发生这个事件的dom对象，例如有多个onclick那么这个事件源对象就是指的是我们点击到的那个dom对象event.target 是火狐独有的，event.srcElement是Ie独有的，而chrome都有。
事件委托
- 事件委托是利用事件冒泡，和事件源对象进行处理，例如有下面的需求: 一个ul里面有1亿个li，要求实现点击一个li，在控制台输出它的内容。如果按照我们普通的想法，为每一个li绑定一个click事件，那么将是非常浪费资源的。那么这个时候我们可以使用事件委托，在ul上面绑定click事件，当点击li的时候会冒泡触发ul上面的click事件，这个时候我们再利用事件对象里面的事件源对象便可获得当前的li，然后输出它的内容，这样一来就节省了很多资源.
取消冒泡和阻止默认事件
冒泡和默认事件的存在有时候也会帮倒忙，那么，怎么阻止他们的触发呢。
取消冒泡
- W3C标准 event.stopPropagation()，但不支持ie9以下版本。
- IE独有 event.cancelBubble = true。
阻止默认事件
默认事件 — 表单提交，a标签跳转，右键菜单等。
- return false，以对象属性的方式注册的事件才生效，即绑定特定的事件，在内部返回false。
- event.preventDefault()，W3C标注，IE9以下不兼容。
- event.returnValue = false，兼容IE。