DOM事件流 (事件捕获和事件冒泡）以及阻止默认事件和阻止冒泡事件

1. DOM事件流

事件流描述的是从页面中接受事件的顺序
事件发生时会在节点之间按照特定的顺序传播 这个传播过程即DOM事件流

比如我们给一个div注册了点击事件
DOM事件流分为三个阶段：
1、捕获阶段（从外往里
2、当前目标阶段
3、冒泡阶段（从里往外

• 冒泡事件：IE最早提出 时间开始由最里层的元素接收 然后逐级向上传播到DOM最顶层节点的过程
• 事件捕获：网景最早提出 由DOM最顶节点开始 然后逐级向下传播到最里层元素的接收过程

注意：
1、js代码中只能执行捕获或者冒泡其中的一个阶段
2、onclick和attachEvent只能得到冒泡阶段
3、addEventListener(type,listener[,useCapture])第三个参数如果是true，表示在事件捕获阶段调用时间处理程序；如果是false（不写默认就是false），表示在时间冒泡阶段调用处理程序

<div class = 'father'>
   <div class = 'son'>son盒子</div>
</div>
<script>
   var son = document.querySelector('.son');
   son.addEventLisenter('click',function(){
      alert('son')
   },true)//第三个参数为true 所以处于捕获阶段  document -> html -> body -> son
   var son = document.querySelector('.father');
   son.addEventLisenter('click',function(){
      alert('father')
   },true)//第三个参数为true 所以处于捕获阶段  document -> html -> body -> son
//先弹出father 后弹出son



   var son = document.querySelector('.son');
   son.addEventLisenter('click',function(){
      alert('son')
   },false)//第三个参数为false 所以处于冒泡阶段 son ->body -> html  -> document 
   var son = document.querySelector('.father');
   son.addEventLisenter('click',function(){
      alert('father')
   },false)//第三个参数为false 所以处于冒泡阶段 son ->body -> html  -> document 
//先弹出son  后弹出father

</script>

2.阻止事件冒泡

标准写法：利用事件对象里的stopPropagation()方法
非标准写法（IE6-8）利用事件对象cancelBubble属性

<div class = 'father'>
   <div class = 'son'>son盒子</div>
</div>
<script>
   var son = document.querySelector('.son');
   son.addEventLisenter('click',function(**e**){
      alert('son')
      e.stopPropagation();//阻止冒泡  stop 停止 propagation 传播
      e.cancelBubble = true;//非标准  cancel 取消  bubble 泡泡
 },false) 
//只弹出son

   var son = document.querySelector('.father');
   son.addEventLisenter('click',function(){
      alert('father')
 },false)

</script>

3. 阻止默认行为
e.preventDefault() 该方法阻止默认事件（方法 ）
e.returnValue ie6-8使用（属性 ）
阻止默认行为（事件） 让链接不跳转 或者 让提交按钮不提交

<a href="http://www.baidu.com">百度</a>
<form action="http://www.baidu.con">
 <input type="submit" value="提交" name="sub">
</form>
<script>
var a = document.querySelector('a');
a.addEventListener('click',function(e){
  e.preventDefault();//dom 标准写法
}
//传统方式
a.onclick = function(e){
  e.preventDefault();//普通浏览器
  e.returnValue; //低版本浏览器ie678  
  return false；//利用 return false也能阻止默认行为 没有兼容性问题
</script>