！NOTICE:这个是我总结写的笔记！我是新手！酌情观看，别说我菜。
javascript中标准事件流addEventListener介绍
什么是事件流：事件流是描述页面接收事件的顺序。 具体的有事件冒泡事件捕获DOM事件流。
1、事件冒泡又叫IE的事件流，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
2、事件捕获的思想是不太具体的节点应该更早的接收到事件，而最具体的节点应该在最后接收到节点。事件捕获的用意在于事件到达预定目标之前捕获它。
3、DOM2级事件流规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件作出响应。
简介
addEventListener 为文档节点、document、window 或 XMLHttpRequest 注册事件处理程序。在以前我们一般是 IE 中用 attachEvent）。
target------------文档节点
document---------------DOM文档
window----------------浏览器窗口
XMLHttpRequest----------------用于在后台与服务器交换数据
DOM事件和IE事件的区别：
IE的事件流是事件冒泡流。
DOM的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
语法
target.addEventListener(type, listener, useCapture);
#---target 文档节点、document、window 或 XMLHttpRequest。
#--- type 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
#---listener 实现了 EventListener 接口或者是 JavaScript 中的函数。
#---useCapture 注明该处理回调函数是在事件传递过程中的捕获阶段被调用还是冒泡阶段被调用。是否使用捕捉，一般用 false。
注意：本文主要讲第四个参数 useCapture
前面都是给你了解 里面的参数是什么！下边进入正题。
addEventListener事件流（标准事件流）
当一个事件发生时，分为三个阶段：
1、捕获阶段： 从根节点开始顺序而下，检测每个节点是否注册了事件处理程序。如果注册了事件处理程序，并且 useCapture 为 true，则调用该事件处理程序。（IE 中无此阶段。）
2、目标阶段： 触发在目标对象（目标节点）本身注册的事件处理程序，也称正常事件派发阶段。
3、冒泡阶段： 从目标节点到根节点，检测每个节点是否注册了事件处理程序，如果注册了事件处理程序，并且 useCapture 为 false，则调用该事件处理程序。（false冒泡）（true捕获）
例子1：
在 div3 上点击鼠标，事件流是这样的：
捕获阶段: 在 div1(根节点) 处检测是否有 useCapture 为 true 的事件处理程序，若有，则执行该程序，然后再同样地处理 div2。
目标阶段: 在 div3(目标节点) 处，发现 div3 就是鼠标点击的节点，所以这里为目标阶段，若有事件处理程序，则执行该程序，这里不论 useCapture 为 true 还是 false。
冒泡阶段: 在 div2(目标节点到根节点中间的节点都要检查) 处检测是否有 useCapture 为 false 的事件处理程序，若有，则执行该程序，然后再同样地处理 div1。
div1 之上还应该有结点，比如有 body-------我是实习生（8天的） 这个我们先不说！
例子2：
* out(外面) middle(中间) in(里面) ----（如果这三个单词都不懂--我只能说---你好骚啊！）
下面上js代码了：
var outDiv = document.getElementById("outDiv");
var middleDiv = document.getElementById("middleDiv");
var inDiv = document.getElementById("inDiv");
var info = document.getElementById("info");
outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "
"; }, false);
middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "
"; }, false);
inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "
"; }, false);
上述是我们测试的代码，根据 info 的显示来确定触发的顺序，有三个 addEventListener，而 useCapture 可选值为 true 和 false，所以 2*2*2，可以得出 8 段不同的程序。
全为 false 时，触发顺序为：inDiv、middleDiv、outDiv；
全为 true 时，触发顺序为：outDiv、middleDiv、inDiv；
outDiv 为 true，其他为 false 时，触发顺序为：outDiv、inDiv、middleDiv；
middleDiv 为 true，其他为 false 时，触发顺序为：middleDiv、inDiv、outDiv；
inDvi 为 true，其他为false 时，出发的顺序为：inDIV、middleDIV、outDIV；
……
最终得出如下结论：
true 的触发顺序总是在 false 之前；
如果多个均为 true，则外层的触发先于内层；
如果多个均为 false，则内层的触发先于外层。
如果一部份为true，另一部份为false，则先触发为true的，然后再从内层向外层触发值为false的；
最后感谢大家观看 ------万水千山总是情，给给关注呗！ 我会加油努力继续学习分享的！