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

朱雀 2023-02-14 13:15 201阅读 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 条评论，201人围观）

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

相关阅读

相关事件冒泡;事件捕获; 触发顺序，先捕获，后冒泡;取消冒泡（封装取消冒泡的函数）；事件对象

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

男娘i/ 2023年06月02日 09:08/ 0 赞/ 27 阅读

相关 JS如何阻止事件冒泡

<%@ Page Language="C" AutoEventWireup="true" CodeFile="Default5.aspx.cs"Inherits=

叁歲伎倆/ 2023年06月01日 12:52/ 0 赞/ 24 阅读

相关事件冒泡、事件捕获、取消冒泡、取消默认事件

事件冒泡：只要结构上，非视觉上嵌套关系的元素，或存在事件冒泡的功能，即同一事件，自子元素冒泡到父元素。如：当点击子元素content时，会向上依次执行（自底向

冷不防/ 2023年03月13日 05:54/ 0 赞/ 5 阅读

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

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

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

相关 JS事件冒泡

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

我不是女神ヾ/ 2023年01月21日 09:20/ 0 赞/ 12 阅读

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

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

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

相关 js事件冒泡

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

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

相关 JS 事件冒泡

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

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

相关 JS事件冒泡

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

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

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

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

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