DOM事件的传播机制

默认只在冒泡阶段触发:outer<body<document<window

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #outer{
            width: 300px;
            height: 300px;
            background: yellow;
            overflow: hidden;
        }
        #center{
            width: 200px;
            height: 200px;
            margin: 20px;
            background: blue;
            overflow: hidden;
        }
        #inner{
            width: 100px;
            height: 100px;
            margin: 20px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="outer">
        <div id="center">
            <div id="inner"></div>
        </div>
    </div>
    <script>
        inner.onclick = function(){
            console.log("inner")
        }
        center.onclick = function(){
            console.log("center")
        }
        outer.onclick = function(){
            console.log("outer")
        }

        document.body.onclick = function(){
            console.log("document.body")
        }
        document.documentElement.onclick = function(){
            console.log("document.documentElement")
        }
        document.onclick = function(){
            console.log("document")
        }

        window.onclick = function(){
            console.log("window")
        }

        // 标准的dom事件流
        // 捕获:window<document<body<outer
        // 目标:inner
        // 冒泡:outer<body<document<window


        // 默认情况,只在冒泡下触发
    </script>
</body>
</html>

如果想全触发需要单独配置,默认参数是false,改成true即可

用的很少

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #outer{
            width: 300px;
            height: 300px;
            background: yellow;
            overflow: hidden;
        }
        #center{
            width: 200px;
            height: 200px;
            margin: 20px;
            background: blue;
            overflow: hidden;
        }
        #inner{
            width: 100px;
            height: 100px;
            margin: 20px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="outer">
        <div id="center">
            <div id="inner"></div>
        </div>
    </div>
    <script>
        // 标准的dom事件流
        // 捕获:window<document<body<outer
        // 目标:inner
        // 冒泡:outer<body<document<window


        // 默认情况,只在冒泡下触发
        inner.addEventListener("click",function(){
            console.log("inner")
        })
        center.addEventListener("click",function(){
            console.log("center")
        })
        outer.addEventListener("click",function(){
            console.log("outer")
        })
        document.body.addEventListener("click",function(){
            console.log("document.body")
        })
        document.documentElement.addEventListener("click",function(){
            console.log("document.documentElement")
        })
        window.addEventListener("click",function(){
            console.log("window")
        })
        // 默认false,改成true  用的很少
        inner.addEventListener("click",function(){
            console.log("inner-捕获")
        },true)
        center.addEventListener("click",function(){
            console.log("center-捕获")
        },true)
        outer.addEventListener("click",function(){
            console.log("outer-捕获")
        },true)
        document.body.addEventListener("click",function(){
            console.log("document.body-捕获")
        },true)
        document.documentElement.addEventListener("click",function(){
            console.log("document.documentElement-捕获")
        },true)
        window.addEventListener("click",function(){
            console.log("window-捕获")
        },true)
    </script>
</body>
</html>
相关推荐
励志要当大牛的小白菜14 分钟前
ART配对软件使用
开发语言·c++·qt·算法
灵感__idea1 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴2 小时前
Mix
前端·webgl
爱装代码的小瓶子3 小时前
数据结构之队列(C语言)
c语言·开发语言·数据结构
代码续发3 小时前
前端组件梳理
前端
试图让你心动3 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码4 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记4 小时前
sass中@mixin与 @include
前端·sass
Maybe_ch4 小时前
.NET-键控服务依赖注入
开发语言·c#·.net
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket