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

Posted 2020-11-23 zhuzhu520

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件处理模型——事件冒泡捕获相关的知识，希望对你有一定的参考价值。

事件冒泡（不绑定事件处理函数一样会发生冒泡事件）

结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一个事件，自子元素冒泡向父元素（自底向上）

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

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

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

触发顺序：先捕获，后冒泡
focus blur change submit reset select 等事件不冒泡

取消冒泡

W3C标准event.stopPropagation(); 但不支持ie9以下版本

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

IE独有event.cancelBubble=true;（这个上边的功能是一样的，写法也是一样的）

阻止默认事件

首先我们先说说什么是默认事件
1. 默认事件——表单提交 a标签跳转右键菜单
我们如何来阻止这些默认事件呢？

return false ；以对象属性的方式注册的事件菜生效

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

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

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

event.returnValue=false; 兼容IE

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

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

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

以上是关于事件处理模型——事件冒泡捕获的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript事件：事件处理模型(冒泡捕获)