JS事件流(事件冒泡事件委托)

最新推荐文章于 2024-03-11 21:23:53 发布

她还会来吗

最新推荐文章于 2024-03-11 21:23:53 发布

阅读量115

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/m0_53895172/article/details/116134910

版权

javaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

DOM事件流

事件流描述的是从页面中接受事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流
分为三个阶段:

捕获阶段(从上往下,从外往内)
目标阶段
冒泡阶段(从下往上,从内往外)

注意:js只能执行捕获或者冒泡其中的一个阶段，两者不可共存
onclick和attachEvent只能得到冒泡阶段，如果需要捕获阶段的话,则需要使用addEventListener

事件冒泡

事件冒泡:IE最早提出,事件开始时由具体的元素接收,然后逐级向上传播到DOM最顶层节点的过程

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: purple;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
<script>
    var father = document.querySelector('.father');
    var son = document.querySelector('.son')
    // 捕获阶段 如果addEventListener 第三个参数为true那么则处于捕获阶段
    father.addEventListener('click',function(){
        alert('I am Father!!!');
    })
    son.addEventListener('click',function(){
        alert('I am son~');
    })
</script>
</html>

在这里插入图片描述
由上图观之,当我们点击子元素时,由于冒泡的存在,父元素也触发了点击事件.
注意:并非所有的事件都有冒泡,比如onblur,onfocus,onmouseenters,onmouseleave

事件捕获

事件捕获:网景最早提出,由DOM最顶层节点开始,然后逐级向下传播到最具体的元素接收的过程

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: purple;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
<script>
    var father = document.querySelector('.father');
    var son = document.querySelector('.son')
    // 冒泡阶段:如果addEventListener第三个参数是false或者省略,那么则处于冒泡阶段
    father.addEventListener('click',function(){
        alert('I am Father!!!');
    },true)
    son.addEventListener('click',function(){
        alert('I am son~');
    },true)
</script>
</html>

在这里插入图片描述

形象化解释

我们向水里面扔一块石头,首先它会有一个下降的过程,该过程就理解为捕获阶段。而当石头沉入水底后,水中就会产生从下到上的泡泡,这个阶段则为冒泡阶段。
在这里插入图片描述

她还会来吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS事件流(事件冒泡事件委托)

DOM事件流事件流描述的是从页面中接受事件的顺序事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流分为三个阶段:捕获阶段(从上往下,从外往内)目标阶段冒泡阶段(从下往上,从内往外)注意:js只能执行捕获或者冒泡其中的一个阶段，两者不可共存onclick和attachEvent只能得到冒泡阶段，如果需要捕获阶段的话,则需要使用addEventListener事件冒泡事件冒泡:IE最早提出,事件开始时由具体的元素接收,然后逐级向上传播到DOM最顶层节点的过程&l
复制链接

扫一扫