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>
相关推荐
shaoweijava25 分钟前
智能家居销量数据分析(源码+数据库)
java·开发语言·数据库·spring boot·mysql·mybatis·智能家居
fcopy2 小时前
sylar:日志管理
服务器·开发语言·c++·后端
大梦百万秋3 小时前
Spring Boot 进阶指南:深入核心与实战技巧
javascript
李钢蛋3 小时前
PHP 应用 ImageMagick
开发语言·图像处理·php
一行玩python3 小时前
PugiXML,一个高效且简单的 C++ XML 解析库!
xml·开发语言·c++·算法
二十雨辰3 小时前
[Java]网络编程
java·开发语言
power-辰南3 小时前
Netty 常见面试题原理解析
java·开发语言·netty·nio
Murrays4 小时前
安装指定版本的python这里以3.11为例子
开发语言·python
IDRSolutions_CN4 小时前
(教程)如何在HTML网页里嵌入PDF文件?
图像处理·pdf·html·团队开发·html5
所有向日癸上升4 小时前
问题 C: B001 快乐的蠕虫
c语言·开发语言·算法