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

简单解析js的事件冒泡

1.什么是事件冒泡？

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

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;