JavaScript 事件冒泡与捕获机制 --- 带动态图理解

 (1).事件捕获

从根元素往上传递  --- ---(由外到内)

(2).事件冒泡

从元素传递到它的根源素  --- --- (由内到外)

代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- js中方法需要加() 如captrueMode()  -->

<body>
    <div class="buttonBox">
        <button class="captrue" onclick="captrueMode('捕获模式')">捕获模式</button>
        <button class="bubbling" onclick="bubblingMode('冒泡模式')">冒泡模式</button>
        <div>当前模式为:(<span id="activeShow"></span>)</div>
    </div>
    <div id="six">
        6
        <div id="five">
            5
            <div id="four">
                4
                <div id="three">
                    3
                    <div id="two">
                        2
                        <div id="one">
                            1
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    // 获取元素
    var elementOne = document.getElementById('one');
    var elementTwo = document.getElementById('two');
    var elementThree = document.getElementById('three');
    var elementFour = document.getElementById('four');
    var elementFive = document.getElementById('five');
    var elementSix = document.getElementById('six');

    const elementArr = [elementOne, elementTwo, elementThree, elementFour, elementFive, elementSix];

    var modeFlag = false; // 默认 -- 冒泡模式
    // 改变模式提示文字方法
    const updateText = (text) => {
        return document.getElementById('activeShow').innerText = text;
    }

    // ! 模式效果操作函数封装
    const directionHandle = function (event) {
        operateHandle(event, this);
    }
    // 元素添加监听控制事件方法封装
    const addEventIsElement = function () {
        elementArr.forEach(item => item.addEventListener('click', directionHandle, modeFlag));
    }
    // 元素删除监听控制事件方法封装
    const removeEventIsElement = function () {
        elementArr.forEach(item => item.removeEventListener('click', directionHandle, modeFlag));
    }
    // 切换为捕获模式
    function captrueMode(mode) {
        removeEventIsElement();
        modeFlag = true, updateText(mode);
        addEventIsElement();
    }

    // 切换为冒泡模式
    function bubblingMode(mode) {
        removeEventIsElement();
        modeFlag = false, updateText(mode);
        addEventIsElement();
    }
    bubblingMode('冒泡模式'); // 默认切换为冒泡模式  
    var showTime = 0;
    var cancelShowTime = 1000;

    // ! 改变属性
    const updateClass = (thisDirection, isAccNumber = false) => {
        if (isAccNumber) { showTime += 1000, cancelShowTime += 1000; }
        setTimeout(() => { thisDirection.className = 'activeColor'; }, showTime);// 2s
        setTimeout(() => { thisDirection.className = ''; }, cancelShowTime);
    }

    // !! 封装操作函数 --  x
    const operateHandle = (event, thisDirection) => {
        if (modeFlag) {
            if (thisDirection.id === 'six') {
                showTime = 0;
                cancelShowTime = 1000;
                updateClass(thisDirection);
            } else {
                updateClass(thisDirection, true);
            }
        } else {
            if (event.srcElement.id === thisDirection.id) {
                showTime = 0;
                cancelShowTime = 1000;
                updateClass(thisDirection);
            } else {
                updateClass(thisDirection, true);
            }
        }
    }



</script>

</html>
<style lang="css">
    #six {
        width: 1200px;
        height: 300px;
        border: 1px solid #000;
        text-align: center;
        margin: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -110%);
        background-color: #fff;
    }

    #five {
        width: 1000px;
        height: 250px;
        border: 1px solid #000;
        margin: auto;
        background-color: #fff;
    }

    #four {
        width: 800px;
        height: 200px;
        border: 1px solid #000;
        margin: auto;
        background-color: #fff;
    }

    #three {
        width: 600px;
        height: 150px;
        border: 1px solid #000;
        margin: auto;
        background-color: #fff;
    }

    #two {
        width: 400px;
        height: 100px;
        border: 1px solid #000;
        margin: auto;
        background-color: #fff;
    }

    #one {
        width: 200px;
        height: 50px;
        border: 1px solid #000;
        margin: auto;
        background-color: #fff;


    }

    .activeColor {
        background-color: red !important;
    }

    .captrue {
        width: 120px;
        height: 36px;
    }

    .buttonBox {
        width: 1200px;
        margin: auto;
    }

    .bubbling {
        width: 120px;
        height: 36px;
    }
</style>

(3). 事件委托

事件委托:在需要的时候把事件交给别的元素来做 --- ---

优点 :(1) 减少内存消耗 ---- ---- 不用在每个标签上添加事件,只需获取父元素下的元素,绑定事件即可完成全部操作。

            (2) 具有动态绑定的效果 ---- ---- 在获取全部元素的条件下,不管增加或者减少的情况下都是一样的

 示例:在页面加载完的时候给元素添加上事件,然后来实现操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>

<body>
    <ul id="list" style="width: 100px;margin:0;float: left;">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <button style="float:left;" id="addli">添加一个 li</button>
    <button style="float:left;" id="delli">删除一个 li</button>
    <script>
        window.onload = function () { 在页面加载完的时候获取到需要的元素
            debugger
            var the_ul = document.getElementById('list');
            var the_li = the_ul.getElementsByTagName('li');
            var sum = the_li.length
            the_ul.onclick = function (e) {
                console.log(e.target.innerHTML)
            };
            document.getElementById('addli').onclick = function () { 给需要的元素绑定上相应的事件
                var newli = document.createElement("li"); 逻辑处理
                newli.innerHTML = ++sum;
                the_ul.appendChild(newli);
            };
            document.getElementById('delli').onclick = function () { 给需要的元素绑定上相应的事件
                the_ul.firstElementChild.remove();逻辑处理
            };
        }
    </script>
</body>

</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/253262.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux(操作系统)面经——part 1(持续更新中......)

1、说一说常用的 Linux 命令 mkdir创建文件夹&#xff0c;touch创建文件&#xff0c;mv移动文件内容或改名 rm-r 文件名&#xff1a;删除文件 cp拷贝&#xff1a;cp 文件1 文件2&#xff0c;cp-r跨目录拷贝 cp-r 路径1 路径2 vi 插入 &#xff1a;wqb保存退出 :q!强制退出…

k8s - container

1、容器的生命周期&#xff1a; (1) 简介&#xff1a; Kubernetes 会跟踪 Pod 中每个容器的状态&#xff0c;就像它跟踪 Pod 总体上的阶段一样。 可以使用容器生命周期回调&#xff0c;在容器生命周期中的特定状态点触发事件。 ● 容器生命周期回调&#xff1a; 在容器的生…

【员工工资册】————大一期末答辩近满分作业分享

前言 大家好吖&#xff0c;欢迎来到 YY 滴项目系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C语言的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; PS&#xff1a;以下内容是部分展示&am…

MetaAI语音翻译大模型Seamless登场,主打AI无缝同声传译

论文题目&#xff1a; Seamless: Multilingual Expressive and Streaming Speech Translation 论文链接&#xff1a; https://ai.meta.com/research/publications/seamless-multilingual-expressive-and-streaming-speech-translation/ 代码链接&#xff1a; GitHub - facebook…

STL容器之string(上)

目录 什么是STL string类 string类常见接口 string类的常见构造函数 string类对象的容器操作 string类对象的访问及遍历操作 string类对象的修改操作 拓展 从本期开始&#xff0c;我们将正式学习C中的STL&#xff0c;美国的麦克阿瑟将军说过&#xff1a;“C不能没有STL就…

游戏运行中突然掉线是什么原因导致的

游戏平稳运行的原因只有一个&#xff0c;掉线的原因各有个的不同。这些不同的原因有常见&#xff0c;也有不常见的。但不管出于什么原因的掉线&#xff0c;带来的损失又是相同的。 首先最常见的原因就是攻击造成的 像CC&#xff0c;DDOS。CC会造成服务器资源的浪费&…

深入理解 Goroutines 和 Go Scheduler

本文将重点帮助您了解 Golang 中的 goroutines。Go 调度程序如何工作以在 Go 中实现最佳并发性能。我会尽力用简单的语言解释,这样你就可以理解了。 我们将介绍什么是操作系统中的线程和进程,什么是并发,为什么实现并发很难,以及 goroutines 如何帮助我们实现并发。然后,…

专业面试刷题网站程序源码

介绍&#xff1a; 一个干净的面试刷题网站&#xff01;专业面试刷题网站&#xff0c;助你成为面试达人&#xff01;支持自由组卷、在线刷题、校招社招斩获大厂offer&#xff0c;求职必备! 用这个刷题代码&#xff0c;助你早日打进狼厂、鹅厂等各大厂&#xff0c;薪水直接等级…

Python装饰器新境界:详解装饰器重载内置操作

更多Python学习内容&#xff1a;ipengtao.com 大家好&#xff0c;我是彭涛&#xff0c;今天为大家分享 Python装饰器新境界&#xff1a;详解装饰器重载内置操作&#xff0c;全文3900字&#xff0c;阅读大约15分钟。 Python装饰器重载内置操作&#xff0c;我们通常指的是使用装饰…

P5729 【深基5.例7】工艺品制作

题目描述 现有一个长宽高分别为 w,x,h 组成的实心玻璃立方体&#xff0c;可以认为是由 111 的数个小方块组成的&#xff0c;每个小方块都有一个坐标 (i,j,k)。现在需要进行 &#xfffd;q 次切割。每次切割给出(x1​,y1​,z1​),(x2​,y2​,z2​) 这 6 个参数&#xff0c;保证…

作为一个的软件测试工程师,想拿到自己想要的薪资,需要具备哪些能力?

如果只是想成为一名低薪的测试工程师&#xff0c;只要掌握功能测试就可以。 但是如果想成为一名高薪的测试工程师&#xff0c;那就要打造你的不可替代性。 可是&#xff0c;你可能会说&#xff1a;“我现在就是个普通职员啊&#xff0c;我就是个普通人&#xff0c;我目前还没有…

go原生http开发简易blog(一)项目简介与搭建

文章目录 一、项目简介二、项目搭建前置知识三、首页- - -前端文件与后端结构体定义四、配置文件加载五、构造假数据- - -显示首页内容 代码地址&#xff1a;https://gitee.com/lymgoforIT/goblog 一、项目简介 使用Go原生http开发一个简易的博客系统&#xff0c;包含一下功能…

【动态规划精选题目】2、路径问题模型

此动态规划系列主要讲解大约10个系列【后续持续更新】 本篇讲解路径问题模型中的6道经典题&#xff0c;会在讲解题目同时给出AC代码 目录 1、不同路径 2、不同路径2 3、珠宝的最大价值 4、下降路径最小和 5、最小路径和 6、地下城游戏 1、不同路径 class Solution { publi…

C语言使用posix正则表达式库

在C语言中&#xff0c;你可以使用 POSIX 正则表达式库&#xff08;regex.h&#xff09;来进行正则表达式的模式匹配。POSIX 正则表达式库提供了一组函数来编译、执行和释放正则表达式。 下面是使用 POSIX 正则表达式库的基本步骤&#xff1a; 包含头文件 <regex.h>&…

Ribbon使用

Ribbon &#xff1a;处理客户端负载均衡和容错的解决方案 配置Ribbon的负载均衡 Rule接口&#xff1a; 定义客户端负载均衡的规则 RandomRule :随机选择RoundRobinRuleZoneAvoidanceRule 配置ribbon的负载均衡策略 在配置文件中配置 user-center:ribbon:NFLoadBalancerRul…

Cheat Enginee(CE)详细使用指南

一&#xff0c;下载与安装 首先在CE的官网下载Cheat Engine的软件包&#xff0c;下载完成之后找到文件所在的位置&#xff0c;进入文件运行exe文件&#xff0c;这样就可以进入Cheat Engine的安装界面。进入安装界面后设置好安装路径点击Next即可安装。 或者通过下载压缩包&…

Android Studio好用的插件推荐

目录 一、插件推荐 二、如何下载 1.点击File—>Settings ​2.点击Plugins然后进行搜索下载 三、Android Studio 模板 一、插件推荐 这个插件可以为您自动生成Parcelable代码。Parcelable是一种用于在Android组件之间传递自定义对象的机制&#xff0c;但手动编写Parcela…

Course3-Week3-强化学习

Course3-Week3-强化学习 文章目录 Course3-Week3-强化学习1. 强化学习的问题引入1.1 什么是强化学习1.2 强化学习示例1.3 数学符号 2. 贝尔曼方程2.1 回报2.2 策略2.3 状态-动作价值函数2.4 贝尔曼方程2.5 随机环境(可选) 3. 连续状态空间3.1 连续状态空间的问题示例——登月器…

FastAdmin后台安装出现2054错误的解决办法

用Navicat修改密码验证方式。MySQL Workbench的Server菜单中的Users and Privileges菜单中似乎不支持此项修改。 修改完毕以后也许会报错&#xff1a; Access denied for user ‘root‘‘localhost‘ (using password: YES) 用以下命令无密进入mysql。 C:\Program Files\MySQ…

Mybatis Plus

一、MyBatis-Plus 1.简介 MyBatis-Plus (opens new window)&#xff08;简称 MP&#xff09;是一个 MyBatis (opens new window)的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。 我们的愿景是成为 MyBatis 最好的搭档&…