近日偶尔发现一段代码，对其执行后的结果产生了一些疑惑，在查阅诸多资料后恍然大悟，特此写下，以表纪念。
如下所示
<html>
<head>
<title>冒泡捕获事件</title>
</head>
<body>
<div id="box1" style="width:200px;height:200px;padding:50px;background-color:gray">box1
<div id="box2" style="width:100px;height:100px;background-color:red;">box2</div>
</div>
</body>
<script>
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
box1.addEventListener("click",function(){
console.log("box1-false");
},false);
box1.addEventListener("click",function(){
console.log("box1-true");
},true);
box2.addEventListener("click",function(){
console.log("box2-false");
},false);
box2.addEventListener("click",function(){
console.log("box2-true");
},true);
</script>
</html>这段代码的运行后，点击box2控制台会输出如下结果：
刚开始我是不理解的，直到后来我又加了一个box3
<div id="box1" style="width:200px;height:200px;padding:50px;background-color:gray">box1
<div id="box2" style="width:100px;height:100px;background-color:red;">box2
<div id="box3" style="width:50px;height:50px;background-color:green;">box3</div>
</div>
</div>
<script>
var box3 = document.getElementById("box3");
box3.addEventListener("click",function(){
console.log("box3-false");
},false);
box3.addEventListener("click",function(){
console.log("box3-true");
},true);
</script>这段代码执行后，点击box3后输出的结果是
这个结果就很明显了，在查阅相关资料后，我先明确了一点：
addEventListener这个监听事件，
当传参为false或者不传时，就是冒泡事件流，从内到外
当传参为true时，监听事件会走捕获型事件流，从外到内。
这样输出就可以理解为
这个时候你会问，为什么不是先输出false,再输出true（先冒泡再捕获）而是先true后false（先捕获再冒泡）呢？
原因如下：
正如图中那样：
事件流会先执行捕获事件，等到达目标元素的父级元素时停止，这里的父级元素就是指box2，然后执行box3的事件
（“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段==>处于目标阶段==>事件冒泡阶段。首先发生的是事件捕获阶段，为截获事件提供了机会。然后是实际的目标接收事件。最后一个阶段是冒泡阶段）；
这个时候你又会问：为什么box3不是先执行捕获事件，再执行冒泡事件呢？
这是因为在第二个阶段（处于目标阶段）时，执行的顺序是按照你书写的顺序执行的，为什么这么说呢，我们把box3的两个事件调换一下顺序看看
目标的事件执行顺序只和你书写的顺序有关，之后事件再从目标这里冒泡出去，所有的点就都解释通了。
但是在文章最后，我还想问一个问题，希望路过的大佬能帮忙解答一二，可能你们没注意到我的代码中，并未定义box1,box2,box3,却能在js中直接使用，而且不报错，这是为什么呢，我把id换成class就报错了，难道定义了id就能直接拿来用吗，我查了一天资料也未找到相关解释，希望路过的大佬能不吝赐教，指点迷津。
