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>
相关推荐
Mr_Xuhhh9 分钟前
信号与槽的总结
java·开发语言·数据库·c++·qt·系统架构
纳兰青华19 分钟前
bean注入的过程中,Property of ‘java.util.ArrayList‘ type cannot be injected by ‘List‘
java·开发语言·spring·list
好开心啊没烦恼21 分钟前
Python 数据分析:DataFrame,生成,用字典创建 DataFrame ,键值对数量不一样怎么办?
开发语言·python·数据挖掘·数据分析
liulilittle24 分钟前
VGW 虚拟网关用户手册 (PPP PRIVATE NETWORK 基础设施)
开发语言·网络·c++·网关·智能路由器·路由器·通信
Devil枫33 分钟前
Kotlin高级特性深度解析
android·开发语言·kotlin
ChinaDragonDreamer35 分钟前
Kotlin:2.1.20 的新特性
android·开发语言·kotlin
安之若素^1 小时前
启用不安全的HTTP方法
java·开发语言
一个天蝎座 白勺 程序猿1 小时前
Python(28)Python循环语句指南:从语法糖到CPython字节码的底层探秘
开发语言·python
持梦远方2 小时前
C 语言基础入门:基本数据类型与运算符详解
c语言·开发语言·c++
abigale032 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js