前言
亲爱的萌新们，说到 javaScript 事件 有基础的童鞋用起来一定很 666 ，但事件流是什么鬼？我认识它吗？它认识我吗？我咋突然失忆了呢。。。哈哈哈，我想说的是，这是正常的，好多写前端页面 5 , 6 年的工程师面对【事件流】这个名词多少也会有疑问、不清楚，更别说是亲爱的萌新们了，别急，今天咱们就系统认识下【事件流】.
事件&事件流
事件：是文档或者浏览器窗口中发生的，特定的交互瞬间，是用户或者浏览器自身执行的某种动作，如 click , load , mouseover 都是事件的名字。
事件流：事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即 DOM 事件流。
由此就产生了两种事件流模型：
冒泡型事件流：事件的传播是从目标节点到根节点。
捕获型事件流：事件的传播是从跟节点到目标节点。
Click me!
点击页面中的 div 元素
冒泡型事件流中 click 事件传播顺序： div -> body -> html -> document
捕获型事件流中 click 事件传播顺序： document -> html -> body -> div
1 . IE9 +、 Firefox 、 Chrome 、 Safari 都支持事件冒泡和捕获；
2 .由于老版本浏览器不支持事件捕获，很少有人使用事件捕获 , 建议使用事件冒泡。
事件流的典型应用-事件代理
传统的事件处理中，需要为每个元素添加事件处理器。 js 事件代理则是一种简单有效的技巧，通过它可以把事件处理器添加到一个父级元素上，从而避免把事件处理器添加到多个子级元素上。
事件代理
事件代理的原理用到的就是事件冒泡和目标元素，把事件处理器添加到父元素，等待子元素事件冒泡，并且父元素能够通过 target （ IE 为 srcElement ）判断是哪个子元素，从而做相应处理。
事件代理的处理方式，代码如下：
- red
- orange
事件代理的好处
将多个事件处理器减少到一个，因为事件处理器要驻留内存，这样就提高了性能。
DOM 更新无需重新绑定事件处理器，因为事件代理对不同子元素可采用不同处理方法。如果新增其他子元素（ a , span , div 等），直接修改事件代理的事件处理函数即可，不需要重新绑定处理器，不需要再次循环遍历。
事件代理的一个应用
点击一个列表项，输出对应的索引.
