码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-12-01 19:04:10      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:listener   ie9   als   code   元素   chrome   back   一个   触发事件   

  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的事件都会被触发,这就是事件冒泡(先触发自己的事件,然后依次向父级)

  2. 事件捕获 
    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上绑定了事件,它们存在嵌套关系,现在我们点击最里边的事件,就会触发捕获事件(先触发被点击的事件的最外层的父级元素的事件,依次向里),这就是事件捕获

  3. 触发顺序:先捕获,后冒泡
  4. focus      blur     change      submit    reset    select  等事件不冒泡
  5. 取消冒泡
    1. W3C标准event.stopPropagation();  但不支持ie9以下版本
    2.             end.onclick=function(e){
                      e.stopPropagation();   //这就会组织冒泡事件的发生    e代表这个是事件的本身
                      console.log("789");
                  }
    3. IE独有event.cancelBubble=true;(这个上边的功能是一样的,写法也是一样的)
  6. 阻止默认事件
    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;
                    }
  7. 事件对象
    1. event  ||   window.event  用于IE  
  8. 事件源对象:(虽然我们前边说过事件存在冒泡,但是我们可以通过下边的方法找到我们所触发的事件源对象)
    1. event.target   火狐只有这个
    2. event.srcElement    IE只有这个
    3. 这俩Chrome都有

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

标签:listener   ie9   als   code   元素   chrome   back   一个   触发事件   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!