事件处理模型——事件冒泡、捕获

1. 事件冒泡（不绑定事件处理函数一样会发生冒泡事件）
   1. 结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一个事件，自子元素冒泡向父元素（自底向上）

      1.             <div class="first" style="width: 300px; height: 300px; background-color: red;">
                         <div class="secend" style="width: 200px; height: 200px; background-color: yellow;">
                             <div class="end" style="width: 100px; height: 100px; background-color: green;"></div>
                         </div>
                     </div>
                 <script>
                     var first = document.getElementsByClassName("first")[0];
                     var secend = document.getElementsByClassName("secend")[0];
                     var end = document.getElementsByClassName("end")[0];
                     first.onclick=function(){
                         console.log("123");
                     };
                     secend.onclick=function(){
                         console.log("456");
                     };
                     end.onclick=function(){
                         console.log("789");
                     }
                   </script>  

         　　我们同时在三个div上绑定了事件，现在三个div存在嵌套的关系，当我们点击最里层的div的时候，就会触发相关的事件冒泡，外边的两个父类div的事件都会被触发，这就是事件冒泡（先触发自己的事件，然后依次向父级）

事件捕获

1. 结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一个事件，自复父元素捕获至子元素（事件源元素）（自顶向下）

   1.             <div class="first" style="width: 300px; height: 300px; background-color: red;">
                      <div class="secend" style="width: 200px; height: 200px; background-color: yellow;">
                          <div class="end" style="width: 100px; height: 100px; background-color: green;"></div>
                      </div>
                  </div>
              <script>
                  var first = document.getElementsByClassName("first")[0];
                  var secend = document.getElementsByClassName("secend")[0];
                  var end = document.getElementsByClassName("end")[0];
                  first.addEventListener(‘click‘,function(){
                      console.log("123");
                  },true);                //当这个true为false时就不会触发事件捕获，但是会触发事件冒泡
                  secend.addEventListener(‘click‘,function(){
                      console.log("456");
                  },true);
                  end.addEventListener(‘click‘,function(){
                      console.log("789");
                  },true)
              </script>

      　　我们同时也在三个div上绑定了事件，它们存在嵌套关系，现在我们点击最里边的事件，就会触发捕获事件（先触发被点击的事件的最外层的父级元素的事件，依次向里），这就是事件捕获

2. 触发顺序：先捕获，后冒泡
3. focus      blur     change      submit    reset    select  等事件不冒泡
4. 取消冒泡
   1. W3C标准event.stopPropagation();  但不支持ie9以下版本

   2.             end.onclick=function(e){
                      e.stopPropagation();   //这就会组织冒泡事件的发生    e代表这个是事件的本身
                      console.log("789");
                  }

   3. IE独有event.cancelBubble=true;（这个上边的功能是一样的，写法也是一样的）
5. 阻止默认事件
   1. 首先我们先说说什么是默认事件
      1. 默认事件——表单提交      a标签跳转        右键菜单
   2. 我们如何来阻止这些默认事件呢？
   3. return false ；以对象属性的方式注册的事件菜生效

      1.             document.oncontextmenu=function(){    //阻止鼠标右键菜单的默认事件
                         console.log("123");
                         return false;
                     }

   4. event.preventDefault();    W3C标准，IE9以下不兼容

      1.             document.oncontextmenu=function(e){
                         console.log("123");
                         e.preventDefault();
                     }

   5. event.returnValue=false;   兼容IE

      1.             document.oncontextmenu=function(e){
                         console.log("123");
                         e.returnValue=false;
                     }

6. 事件对象
   1. event  ||   window.event  用于IE　　

事件源对象：（虽然我们前边说过事件存在冒泡，但是我们可以通过下边的方法找到我们所触发的事件源对象）

1. event.target   火狐只有这个
2. event.srcElement    IE只有这个
3. 这俩Chrome都有

原文地址：https://www.cnblogs.com/zhuzhu520/p/11966879.html