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>
相关推荐
LBJ辉27 分钟前
1. 小众但非常实用的 CSS 属性
前端·css
milk_yan32 分钟前
Docker集成onlyoffice实现预览功能
前端·笔记·docker
ByteBlossom6661 小时前
MDX语言的语法糖
开发语言·后端·golang
村口蹲点的阿三2 小时前
Spark SQL 中对 Map 类型的操作函数
javascript·数据库·hive·sql·spark
m0_748255022 小时前
头歌答案--爬虫实战
java·前端·爬虫
肖田变强不变秃3 小时前
C++实现矩阵Matrix类 实现基本运算
开发语言·c++·matlab·矩阵·有限元·ansys
沈霁晨3 小时前
Ruby语言的Web开发
开发语言·后端·golang
小兜全糖(xdqt)3 小时前
python中单例模式
开发语言·python·单例模式
DanceDonkey3 小时前
@RabbitListener处理重试机制完成后的异常捕获
开发语言·后端·ruby
Python数据分析与机器学习3 小时前
python高级加密算法AES对信息进行加密和解密
开发语言·python