javascript之事件冒泡与事件捕获

冰暮流星2026-05-02 8:47

事件冒泡是DOM事件传播的一种机制。当一个事件发生在某个元素上，事件会从触发元素开始，逐级向上传播到根元素。

具体例子

html 复制代码

<div class="div1" onclick="print('div1')">
        div1
        <div class="div2" onclick="print('div2')">
            div2
            <div class="div3" onclick="print('div3')">
                div3
                <div class="div4" onclick="print('div4')">
                    div4
                </div>
            </div>
        </div>
    </div>

这是一个div嵌套div的案例，每个div都绑了事件，对应的回调函数如下

javascript 复制代码

function print(name) 
        {
            console.log(name)
        }

函数作用是点击时输出自己对应的div标签

具体css代码如下

css 复制代码

 div {
            border:1px solid black;
        }

        .div1 {
            width: 200px;
            height: 200px;
        }

        .div2 {
            width:150px;
            height:150px;
        }

        .div3 {
            width:100px;
            height:100px;
        }

        .div4 {
            width:50px;
            height:50px;
        }

具体效果图如下

在点击div4标签时

可以看出不仅div4的事件触发，其父元素div3,div2,div1事件都触发了

事件捕获

定义：

事件捕获是JavaScript中事件传播的一个阶段，发生在事件冒泡之前。在DOM树结构中，事件从最外层的祖先元素开始，逐级向下传递到目标元素。这种机制允许在事件到达目标之前进行拦截或处理。

事件捕获通过addEventListener方法的第三个参数设置为true来启用事件捕获。

还是上面的div案例，每个div加个id

html 复制代码

 <div class="div1" id="div1">
        div1
        <div class="div2" id="div2">
            div2
            <div class="div3" id="div3">
                div3
                <div class="div4" id="div4">
                    div4
                </div>
            </div>
        </div>
    </div>

js代码如下

javascript 复制代码

         function $(id)
        {
            return document.getElementById(id)
        }

$('div1').addEventListener('click',function()
            {
                console.log('div1')
            },true)
            $('div2').addEventListener('click',function()
            {
                console.log('div2')
            },true)
            $('div3').addEventListener('click',function(event)
            {
                console.log('div3')
                event.stopPropagation() //阻止事件的传播
            },true)
            $('div4').addEventListener('click',function()
            {
                console.log('div4')
            },true)

可以看出addEventListener多了第三个参数，默认是false，是事件冒泡，true是事件捕获