事件冒泡机制

陌一一

已于 2022-12-20 21:04:48 修改

阅读量1.1k

点赞数 1

分类专栏： web前端开发文章标签： javascript html 前端 web

于 2022-10-25 09:56:13 首次发布

本文链接：https://blog.csdn.net/a1598452168YY/article/details/127506628

版权

web前端开发专栏收录该内容

281 篇文章 16 订阅

订阅专栏

1、事件的传递

图示：

解释说明：

我们给子标签绑定了一个事件，当执行到这个事件时，这个事件会往上（也就是父标签--祖父标签--往上）传递，如果父标签也绑定了事件，此时这个事件就会触发，没有绑定的话就没事，此时事件传递并没有结束，会继续往上传递，还是跟父盒子一样，有事件就触发，没事件就不会，直到这个事件传递到最上面一层结束。

另外当子盒子没有绑定事件，但父盒子绑定了事件，那点击子盒子，父盒子也会触发。

注意：冒泡机制是针对同一个事件，子元素和父元素绑定的是相同的事件，如果子元素绑了点击事件，父元素绑的不是点击事件是其他事件，那么这个其他事件是不会触发的。

2、标准DOM事件流：

按照上面事件传递的原理就引出了下面这个概念：标准DOM事件流：

标准事件流规定：这个事件的传递其实有两个过程：

捕获过程：window=>document=>body=>outer；

目标：inner

冒泡：outer=>body=>document=>window

默认情况下：事件传递过程只在冒泡触发，捕获过程存在，但是不会触发，按照dom2事件绑定，并进行配置，才能看到捕获的回调函数被触发。

如果真的想看到捕获过程被触发，看下面的js代码：首先按照dom2事件绑定，然后再给事件传递第三个参数：true（默认不传是false）：

<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: 500px;
            height: 500px;
            background-color: bisque;
            overflow: hidden;
        }
        #center{
            width: 300px;
            height: 300px;
            background-color: blue;
            margin: 50px;
            overflow: hidden;
        }
        #inner{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div id="outer">
        <div id="center">
            <div id="inner">

            </div>
        </div>
    </div>
    <script>
        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>

结果：