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>
相关推荐
ptu小鹏17 分钟前
类和对象(中)
开发语言·c++
来自星星的坤42 分钟前
Vue 3中如何封装API请求:提升开发效率的最佳实践
前端·javascript·vue.js
Rey_family2 小时前
CSS学习笔记
css·笔记·学习
vvilkim2 小时前
全面解析React内存泄漏:原因、解决方案与最佳实践
前端·javascript·react.js
vvilkim2 小时前
React批处理(Batching)更新机制深度解析
前端·javascript·react.js
Bayi·2 小时前
前端面试场景题
开发语言·前端·javascript
碎梦归途2 小时前
23种设计模式-结构型模式之享元模式(Java版本)
java·开发语言·jvm·设计模式·享元模式
Xiaoyu Wang3 小时前
Go协程的调用与原理
开发语言·后端·golang
bigear_码农3 小时前
python异步协程async调用过程图解
开发语言·python·线程·进程·协程
程序猿熊跃晖3 小时前
Vue中如何优雅地处理 `<el-dialog>` 的关闭事件
前端·javascript·vue.js