JS-事件机制(捕获，冒泡)

最新推荐文章于 2020-01-06 15:33:44 发布

WEIDDDDD

最新推荐文章于 2020-01-06 15:33:44 发布

阅读量188

点赞数

分类专栏： JS学习记录文章标签： javascript 事件捕获冒泡

本文链接：https://blog.csdn.net/weixin_41682828/article/details/90816000

版权

JS学习记录专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、事件流：
       冒泡流：事件“由底向上”传播。
       捕获流：事件“由上向底”传播。
       阶段：

捕获阶段
目标阶段
冒泡阶段

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="a" style="width: 500px;height: 500px;background-color: aliceblue;margin: 0 auto">
        <div id="b" style="width: 400px;height: 400px;background-color: antiquewhite;margin: 0 auto">
            <div id="c" style="width: 300px;height: 300px;background-color: aqua;margin: 0 auto">
                <div id="d" style="width: 200px;height: 200px;background-color: aquamarine;margin: 0 auto">
                    <div id="e" style="width: 100px;height: 100px;background-color: azure;margin: 0 auto">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.getElementById('a').addEventListener('click',function () {
            console.log("这是a捕获阶段");
        },true);
        document.getElementById('a').addEventListener('click',function () {
            console.log("这是a冒泡阶段");
        },false);
        document.getElementById('b').addEventListener('click',function () {
            console.log("这是b捕获阶段");
        },true);
        document.getElementById('b').addEventListener('click',function () {
            console.log("这是b冒泡阶段");
          }
        );

        document.getElementById('c').addEventListener('click',function () {
            console.log("这是c捕获阶段");
        },true);
        document.getElementById('c').addEventListener('click',function () {
            console.log("这是c冒泡阶段");
        },false);

        document.getElementById('d').addEventListener('click',function () {
            console.log("这是d捕获阶段");
        },true);
        document.getElementById('d').addEventListener('click',function () {
            console.log("这是d冒泡阶段");
        },false);

        document.getElementById('e').addEventListener('click',function () {
            console.log("这是捕e获阶段");
        },true);
        document.getElementById('e').addEventListener('click',function () {
            console.log("这是e冒泡阶段");
        },false);
    </script>
</body>
</html>

点击id=“c”时候的效果：
（蓝绿色那块为id=“c”）
addEventListener( , , ):第三个参数为：

true时：在捕获阶段处理调用事件处理程序
false时：在冒泡阶段处理调用事件处理程序

我们点击id=“c”的div标签时，事件从最外层的id=“a”向id=“c”开始传播，此时为捕获阶段。当捕获到id=“c”时，事件开始从最里层的id="c"开始向id="a"传播，此时为冒泡阶段。

由此可见: 捕获流是“由外向内”传播。而冒泡流是：“由内向外”