简单解析js的事件冒泡及如何取消事件冒泡

朱雀 2023-02-14 13:15 162阅读 0赞

## 简单解析js的事件冒泡 ##

**1.什么是事件冒泡？**

以click点击事件为例。假如我们有一个多层结构标签。如下图，是4个div嵌套。每个div都有点击的监听事件，分别alert(“box4”),alert(“box3”),alert(“box2”),alert(“box1”)。当我们点击最里面的div时，点击事件开始传递。出现的效果是**alert(“box4”)-alert(“box3”)-alert(“box2”)-alert(“box1”)**。这就是事件冒泡阶段。效果如下：

![在这里插入图片描述][20200603020540355.gif_pic_center]

**HTML代码：**

<div class="box1">
            <div class="box2">
                <div class="box3">
                    <div class="box4"></div>
                </div>
            </div>
        </div>

**CSS代码：**

* { 
                margin: 0;
                padding: 0;
            }
            .box1{ 
                width: 400px;
                height: 400px;
                background: red;
            }
            .box2{ 
                width: 300px;
                height: 300px;
                background: yellow;
            }
            .box3{ 
                width: 200px;
                height: 200px;
                background: skyblue;
            }
            .box4{ 
                width: 100px;
                height: 100px;
                background: green;
            }

**JS代码：**

var oBox1=document.getElementsByClassName("box1")[0];
        var oBox2=document.getElementsByClassName("box2")[0];
        var oBox3=document.getElementsByClassName("box3")[0];
        var oBox4=document.getElementsByClassName("box4")[0];
    
        // 事件冒泡 由里向外执行
        oBox1.onclick=function(ev){ 
            alert("box1");    
        }
        oBox2.onclick=function(ev){ 
            alert("box2");
        }
        oBox3.onclick=function(ev){ 
    
            alert("box3");
        }
        oBox4.onclick=function(ev){ 
            alert("box4");
        }

**2.如何取消事件冒泡**

var oBox1=document.getElementsByClassName("box1")[0];
        var oBox2=document.getElementsByClassName("box2")[0];
        var oBox3=document.getElementsByClassName("box3")[0];
        var oBox4=document.getElementsByClassName("box4")[0];
    
        // 事件冒泡 由里向外执行
        oBox1.onclick=function(ev){ 
            // console.log(ev);
            // console.log("box1");
            alert("box1");    
            if(ev&&ev.stopPropagation){ 
                ev.stopPropagation();//除 IE外的浏览器
            }else{ 
                ev.cancelBubble=true;//针对IE
            }
        }
        oBox2.onclick=function(ev){ 
            // console.log("box2");
            alert("box2");
            if(ev&&ev.stopPropagation){ 
                ev.stopPropagation();//除 IE外的浏览器
            }else{ 
                ev.cancelBubble=true;//针对IE
            }
        }
        oBox3.onclick=function(ev){ 
            // console.log("box3");
            alert("box3");
            if(ev&&ev.stopPropagation){ 
                ev.stopPropagation();//除 IE外的浏览器
            }else{ 
                // ev.cancelBubble=true;//针对IE
            }
        }
        oBox4.onclick=function(ev){ 
            console.log("box4");
            console.log(ev);
            // alert("box4");
            if(ev&&ev.stopPropagation){ 
                ev.stopPropagation();//除 IE外的浏览器
            }else{ 
                ev.cancelBubble=true;//针对IE
            }
        }

**视频讲解链接：  
https://www.bilibili.com/video/BV1dv411z7mY/**

[20200603020540355.gif_pic_center]: https://img-blog.csdnimg.cn/20200603020540355.gif#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，162人围观）

还没有评论，来说两句吧...

相关阅读

相关简单解析js的事件冒泡及如何取消事件冒泡

简单解析js的事件冒泡 1.什么是事件冒泡？以click点击事件为例。假如我们有一个多层结构标签。如下图，是4个div嵌套。每个div都有点击的监听事件，分别aler

朱雀/ 2023年02月14日 13:15/ 0 赞/ 163 阅读

相关整理事件绑定 addEventLister()事件取消默认行业，阻止冒泡取消事件冒泡

事件冒泡指当一个元素的事件被触发的时候，比如鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发，这个过程被称为事件冒泡。这个事件是从原始元素开始一直冒泡到DOM

梦里梦外;/ 2022年12月02日 15:23/ 0 赞/ 160 阅读

相关 Js 冒泡事件阻止

出于对作者的尊重和感谢，原文地址为 http://www.cnblogs.com/jams742003/archive/2009/08/29/1556187.html

Bertha 。/ 2022年09月24日 00:29/ 0 赞/ 216 阅读

相关 js事件冒泡

js事件冒泡的机制：子元素定义的事件触发时，如果父元素定义了同样的事件，就会逐级向上执行，直到最顶层window，子元素执行子元素的事件，父元素执行父元素的事件，不是子元素

左手的ㄟ右手/ 2022年09月23日 08:08/ 0 赞/ 125 阅读

相关 js阻止事件冒泡

function stopHandler(event){ window.event?window.event.cancelBubble=true:eve

古城微笑少年丶/ 2022年07月13日 00:48/ 0 赞/ 236 阅读

相关 JS 事件冒泡

参考： 1、JavaScript事件冒泡简介及应用 http://www.cnblogs.com/webflash/archive/2009/08/23/1552462.h

约定不等于承诺〃/ 2022年05月21日 02:43/ 0 赞/ 149 阅读

相关 JS事件冒泡

事件冒泡 Demo: 冒泡现象 html: 1 <script src="index.js"></script> 2 <style> 3

末蓝、/ 2021年12月24日 06:19/ 0 赞/ 252 阅读

相关 js 取消冒泡和阻止默认事件

取消冒泡 function stopBubble(e) { //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e.sto

雨点打透心脏的1/2处/ 2021年10月23日 22:42/ 0 赞/ 354 阅读

相关 JavaScript 取消默认事件、阻止事件冒泡的方法

首先页面上创建一个a标签：<a href="\" οnclick="do\_Click()">默认事件</a> 然后给body加一个点击事件： document.b

Bertha 。/ 2021年07月24日 17:43/ 0 赞/ 483 阅读

相关关于js事件冒泡

一个对象没有定义此事件或者事件返回结果为true，那么这个事件会向该对象的父级对象传播，一直到该对象的最顶层父级对象，都将执行该事件：如下，去掉.stop会执行所有的...

朱雀/ 2020年11月14日 20:32/ 0 赞/ 717 阅读