事件冒泡与事件捕获

青旅半醒 2022-05-19 13:08 347阅读 0赞

## 事件冒泡 ##

事件冒泡是自下而上的去触发事件

例如：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件冒泡</title>
    </head>
    <body>
    <div id="parent">
        　　<div id="child" class="child">事件冒泡</div>
    </div>
    </body>
    <script>
        document.getElementById("parent").addEventListener("click",function(e)   {
            console.log("parent事件被触发，"+this.id);
        })
    
        document.getElementById("child").addEventListener("click",function(e)
        {
            console.log("child事件被触发，"+this.id)
        })
    </script>
    </html>

结果图：

![70][]

结论：

先child，然后parent。事件的触发顺序自内向外，这就是事件冒泡。

## 事件捕获 ##

事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件

例如：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件捕获</title>
    </head>
    <body>
    <div id="parent">　　
        <div id="child" class="child">事件捕获</div>
    </div>
    </body>
    <script>
        document.getElementById("parent").addEventListener("click", function (e) {
            console.log("parent事件被触发");
        }, true)
        document.getElementById("child").addEventListener("click", function (e) {
            console.log("child事件被触发")
        }, true)
    
    </script>
    </html>

结果图：

![70 1][]

结论：

先parent,然后child。事件触发顺序变更为自外向内，这就是事件捕获。

[70]: /images/20220519/f8efe031951242a0b53709116b5812a4.png
[70 1]: /images/20220519/470b5c37fdd249d6873ba8cef12c5697.png

发表评论取消回复

表情：

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

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

相关阅读

相关冒泡与捕获事件

一.冒泡与捕获 1.概念。冒泡事件：微软公司提出的，事件由子元素传递到父元素的过程叫做冒泡（false）。捕获事件：网景公司提出的，事件由父元素传递到子

雨点打透心脏的1/2处/ 2024年02月20日 11:28/ 0 赞/ 80 阅读

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

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

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

相关事件流----事件冒泡事件捕获

DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件. 1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 IE

拼搏现实的明天。/ 2022年08月21日 14:49/ 0 赞/ 337 阅读

相关事件模型--冒泡与捕获

Traditional Module（传统方式的事件模型）直接在DOM元素上绑定事件处理器 window.onload=function(){ …} o

秒速五厘米/ 2022年06月10日 00:18/ 0 赞/ 305 阅读

相关浅析JavaScript事件捕获与事件冒泡

一、什么是事件流？事件，是文档或浏览器窗口中发生的一些特定的交互瞬间。事件流，描述的是页面中接收事件的顺序。一个事件被触发后，一般会有三个不同的阶段：捕获阶段、目标

亦凉/ 2022年05月26日 12:30/ 0 赞/ 298 阅读

相关事件冒泡与事件捕获

事件冒泡事件冒泡是自下而上的去触发事件例如： <!DOCTYPE html> <html lang="en"> <head

青旅半醒/ 2022年05月19日 13:08/ 0 赞/ 348 阅读

相关事件冒泡或事件捕获？

事件传递有两种方式：冒泡（里层-false）与捕获（外层-true）。事件传递定义了元素事件触发的顺序。如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p>

系统管理员/ 2022年04月12日 04:37/ 0 赞/ 386 阅读

相关事件捕获与事件冒泡

事件：JavaScript和HTML之间的交互是通过事件实现的事件流：描述的是页面接受事件的顺序事件捕获：不太具体的节点先接受到事件，最具体的节点最后接收到事件（顺

喜欢ヅ旅行/ 2022年01月22日 05:19/ 0 赞/ 375 阅读

相关捕获事件与冒泡事件

如何区分捕获事件与冒泡事件捕获事件从外向里触发事件冒泡事件从里向外触发事件捕获事件与冒泡事件先手顺序先捕获在冒泡如果有注册事件按照注

Love The Way You Lie/ 2022年01月20日 13:05/ 0 赞/ 391 阅读

相关事件冒泡捕获

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

红太狼/ 2021年03月22日 12:49/ 0 赞/ 697 阅读