事件捕获
事件由父级向子级传递
通用样式：
<style>.d1{width: 300px;height: 300px;background-color:tomato;overflow: hidden;}.d2{width: 200px;height: 200px;background-color:gold;margin:50px auto;overflow: hidden;}.d3{width: 100px;height: 100px;margin:50px auto;background-color:yellowgreen;}</style>
代码1：
<body><div class="d1"><div class="d2"><div class="d3"></div></div></div></body><script>var d1 = document.querySelector(".d1");var d2 = document.querySelector(".d2");var d3 = document.querySelector(".d3");// 事件捕获d1.addEventListener('click',function(){console.log(11);},true)d2.addEventListener('click',function(){console.log(22);},true)d3.addEventListener('click',function(){console.log(33);},true)</script>
当点击d3时，从最外层d1开始触发：
可以看出它是从最外面开始触发的，直到捕获到你点击的div为止，模型图如下：
事件冒泡
事件由子级传向父级
代码2 ：
<script>var d1 = document.querySelector(".d1");var d2 = document.querySelector(".d2");var d3 = document.querySelector(".d3");// 事件捕获d1.addEventListener('click',function(){console.log(11);},false)d2.addEventListener('click',function(){console.log(22);},false)d3.addEventListener('click',function(){console.log(33);},false)</script>
当点击d3时，从d3开始向外触发
同样的图，但是它们的触发顺序却不同，如下：
阻止冒泡事件e.stopPropagation()
例如：上述案例
<script>var d1 = document.querySelector(".d1");var d2 = document.querySelector(".d2");var d3 = document.querySelector(".d3");// 事件捕获d1.addEventListener('click',function(e){console.log(11);e.stopPropagation();},false)d2.addEventListener('click',function(e){console.log(22);e.stopPropagation();},false)d3.addEventListener('click',function(e){console.log(33);e.stopPropagation();},false)</script>
再次点击d3只会输出d3不会向上扩展（d2,d1同样是）
阻止默认事件e.preventDefault()
取消事件的默认动作。该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。
例如：form表单如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。a元素中href连接，如果调用此方法是，连接不会被打开。
举例：
1.不阻止默认事件，会打印111并且页面会跳转
<body><div id="box"><a id="box_1" href="">百度网</a></div></body><script>var box = document.getElementById("box");var box_1 = document.getElementById("box_1");box.onclick = function(){console.log(111);}</script>
2.阻止默认事件，此时点击，会打印111但是页面不会跳转
<script>var box = document.getElementById("box");var box_1 = document.getElementById("box_1");box.onclick = function(){console.log(111);}box_1.onclick = function(e){e.preventDefault();}</script>
