Event事件学习实用路线（2）——Event事件之事件冒泡和事件捕获

最新推荐文章于 2024-04-27 00:23:45 发布

溜_x_i_a_o_迪

最新推荐文章于 2024-04-27 00:23:45 发布

阅读量191

点赞数 1

分类专栏： # JS——Event事件 Web前端原生JavaScript 文章标签： js javascript event html5 前端

本文链接：https://blog.csdn.net/u013946061/article/details/105738590

版权

原生JavaScript 同时被 3 个专栏收录

34 篇文章 0 订阅

订阅专栏

Web前端

32 篇文章 0 订阅

订阅专栏

JS——Event事件

11 篇文章 0 订阅

订阅专栏

Event事件之事件冒泡和事件捕获

事件冒泡和事件捕获

事件冒泡和事件捕获

事件监听函数

addEventListener(‘ev’,fn,[Boolean,{}])

它有三个参数
第一个参数：执行事件的名称
第二个参数：fn函数
第三个参数：传递有两种形式：Boolean或者一个对象

默认第三个参数是 false （不捕获，因此该函数默认是冒泡执行的），第三个参数：如果是布尔值：true 是进行捕获执行， false 不捕获

事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 200px;
            width: 200px;
            background: red;
        }
        p{
            width: 100px;
            height: 100px;
            background: blueviolet;
        }
    </style>
</head>
<body>
<div>
    <p></p>
</div>
<script>
    {
        let div = document.querySelector("div");
        let p = document.querySelector("p");

        div.addEventListener("click",()=>{
            alert("div");
        });

        p.addEventListener("click",()=>{
            alert("p");
        });
    }
</script>  
</body>
</html>

在这里插入图片描述
事件冒泡的执行顺序：由小到大 p > div > body > html

事件捕获

    {
        let div = document.querySelector("div");
        let p = document.querySelector("p");

        div.addEventListener("click",()=>{
            alert("div");
        },true);

        p.addEventListener("click",()=>{
            alert("p");
        },true);
    }

事件捕获：由大到小 html > body > div > p
实际捕获和冒泡是反着进行的
在这里插入图片描述
事件捕获：当事件发生时，最先得到通知的是window，然后是document，由上至下逐级依次而入，直到真正触发事件的那个元素(目标元素)为止，这个过程就是捕获。

事件冒泡：事件会从目标元素开始起泡，由下至上逐级依次传播，直到window对象为止，这个过程就是冒泡。

同时事件监听函数的第三个参数还可以传递对象：{}
capture:true/false 是否在捕获阶段执行
once:true/false 只执行一次事件

{
        let div = document.querySelector("div");
        let p = document.querySelector("p");

        // document.addEventListener('click',function(){
        //     alert('document');
        // });

        // document.body.addEventListener('click',function(){
        //     alert('body')
        // });

        div.addEventListener("click",()=>{
            alert("div");
        });

        p.addEventListener("click",()=>{
            alert("p");
        },{
            capture:true
        });
    }

是冒泡的执行形式：
在这里插入图片描述

        let div = document.querySelector("div");
        let p = document.querySelector("p");

        // div.addEventListener("click",()=>{
        //     alert("div");
        // });

        div.addEventListener('click',function(){
            alert('div');
        },{
            capture:true
        });
        
        p.addEventListener("click",()=>{
            alert("p");
        },{
            capture:true
        });

是捕获的执行形式：
在这里插入图片描述

        let div = document.querySelector("div");
        let p = document.querySelector("p");

        div.addEventListener('click',function(){
            alert('div');
        },{
            once:true
        });
        
        p.addEventListener("click",()=>{
            alert("p");
        });

div的点击事件只执行一次。
在这里插入图片描述

（后续待补充）

溜_x_i_a_o_迪

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Event事件学习实用路线（2）——Event事件之事件冒泡和事件捕获

Event事件之事件冒泡和事件捕获事件冒泡和事件捕获事件监听函数事件冒泡事件捕获事件冒泡和事件捕获事件监听函数addEventListener(‘ev’,fn,[Boolean,{}])它有三个参数第一个参数：执行事件的名称第二个参数：fn函数第三个参数：传递有两种形式：Boolean或者一个对象默认第三个参数是 false （不捕获，因此该函数默认是冒泡执行的），第三...
复制链接

扫一扫

专栏目录