当前位置： 首页 > news >正文

〖大前端 - 基础入门三大核心之JS篇㊹〗- DOM事件委托

news 文章来源：https://blog.csdn.net/weixin_42250835/article/details/134759728 2025/4/29 16:10:09
  • 说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加V！
  • 作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 从事过全栈研发、产品经理等工作，目前在公司担任研发部门CTO。
  • 荣誉：2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。
  • 🏆 白宝书系列
    • 🏅 启示录 - 攻城狮的自我修养
    • 🏅 Python全栈白宝书
    • 🏅 ChatGPT实践指南白宝书
    • 🏅 产品思维训练白宝书
    • 🏅 全域运营实战白宝书
    • 🏅 大前端全栈架构白宝书

文章目录

  • ⭐ DOM事件委托

⭐ DOM事件委托

事件委托可以帮助解决添加事件监听的两个问题：

  1. 批量添加事件监听大量占用内存会出现的性能问题
  2. 动态添加的元素必须添加事件监听，不能获得事件监听。

下面举两个案例来分别介绍着两个问题。

**案例一，批量添加事件监听会遇到性能问题：**页面上有一个无序列表，它内部共有20个<li>元素，请批量给它们添加点击事件监听，实现效果：点击哪个<li>元素，哪个<li>元素就变红。

题目分析：可以使用getElementsByTagName可以获取到li的数组，然后通过遍历的方式循环添加事件监听

<body><div><ul id="list"><li>项</li><li>项</li><li>项</li><li>项</li><li>项</li><li>项</li><li>项</li><li>项</li><li>项</li><li>项</li><li>项</li><li>项</li><li>项</li><li>项</li><li>项</li><li>项</li><li>项</li><li>项</li><li>项</li><li>项</li></ul></div><script>var oList = document.getElementById('list');var lis = oList.getElementsByTagName('li');for (var i = 0; i < lis.length; i++) {lis[i].onclick = function () {//在这个函数中，this表示点击的这个元素，this涉及函数上下文的相关知识，我们在“面向对象”中再介绍this.style.color = 'red';};};</script>
</body>

image-20230423174447970

上面案例中，每一个事件监听注册都会消耗一定的系统内存，而批量添加事件会导致监听数量太多，内存消耗会非常大。并且每个事件处理函数都是不同的函数，这些函数本身也会占用内存。

**案例二，页面元素是动态添加的，每个元素都需要添加事件监听：**页面上有一个无序列表，它内部没有<li>元素，请制作一个按钮，点击这个按钮就能添加一个<li>元素。并且要求每个增加的<li>元素也要有事件监听，实现效果点击哪个<li>元素，哪个<li>元素就变红

题目分析：li的数量不是固定的，没办法使用循环遍历的方式去批量添加事件监听。我们给新创建的li节点添加事件监听

<body><button id="btn">点击我添加列表项</button><div><ul id="list"></ul></div><script>var oBtn = document.getElementById('btn');var oList = document.getElementById('list');oBtn.onclick = function () {//创建一个孤儿节点var oLi = document.createElement('li');oLi.innerHTML = '我是列表项';//上树oList.appendChild(oLi);//添加事件监听oLi.onclick = function () {oLi.style.color = 'red';};};</script>
</body>

上面案例中，同样会出现性能问题，因为每个事件处理函数都会占用新的内存，添加几个li，就会创建几个事件监听处理函数。

为了解决上面的问题，DOM提供了一种方法，即事件委托。

**事件委托：**利用事件冒泡机制，将后代元素事件委托给祖先元素

比如下图中，点击任何一个<li>元素，事件都会通过事件冒泡传给祖先元素，我们只需要给<ul>添加事件监听就可以了，而不需要给每一个<li>都添加一遍事件监听。

image-20230424101047900

事件委托需要结合e.target属性来实现

属性属性描述
target触发此事件的最早元素，即“事件源元素”
currentTarget事件处理程序附加到的元素，与this非常相似

示例代码：

<body><ul id="list"><li>我是列表项</li><li>我是列表项</li><li>我是列表项</li><li>我是列表项</li><li>我是列表项</li></ul><script>var oList = document.getElementById('list');//给ul添加事件监听oList.onclick = function (e) {//e.target就表示点击的那个元素，即事件源元素，将事件源元素变红e.target.style.color = 'red';}</script>
</body>

image-20230424102428644

可以自行尝试一下动态创建元素，点击按钮创建新的li，然后利用事件委托实现鼠标点击li时，文字变红。

事件委托的使用场景

  • 当有大量元素需要批量添加事件监听时，使用事件委托可以减少内存开销

  • 当有动态元素节点上树时，使用事件委托可以让新上树的元素具有事件监听

事件委托的注意事项

  • 注意事件是否冒泡，不能委托不冒泡的事件给祖先元素

    在鼠标事件监听中，onmouseenter和onmouseover都表示“鼠标进入”，它们有什么区别呢？答：onmouseenter不冒泡，onmouseover冒泡；onmouseenter这个属性天生就是“不冒泡”的，相当于你事件处理函数附加给了哪个DOM节点，就是哪个DOM节点自己触发的事件，没有冒泡的过程。

    示例代码：

    //因为onmouseeter不冒泡，所以鼠标进入ul中的某个li时，整个ul都会变红，因为这个事件监听针对的是ul节点元素。
oList.onmouseenter = function (e) {   e.target.style.color = 'red';
};

    解决办法：将onmouseenter换成onmouseover

  • 最内层元素尽可能不能再有额外的内层元素了，否则可能实现不了理想的效果

    比如下面的例子中，li内部还包了span标签，当鼠标点击span标签的内容时，只有span标签的变红了，而不能使整个li变红。

    <body><ul id="list"><li><span>姓名：</span>我是列表项</li><li><span>电话：</span>我是列表项</li><li><span>地址：</span>我是列表项</li><li><span>邮箱：</span>我是列表项</li><li><span>手机：</span>我是列表项</li></ul><script>var oList = document.getElementById('list');//给ul添加事件监听oList.onclick = function (e) {e.target.style.color = 'red';};</script>
</body>

    image-20230424104833829

相关文章：

〖大前端 - 基础入门三大核心之JS篇㊹〗- DOM事件委托

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;不渴望力量的哈士奇(哈哥)&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xf…...

编程日记 2023/12/4 4:03:09

正是阶段高等数学复习--函数极限的计算

之前在预备阶段中函数极限的解决方式分三步&#xff0c;第一步观察形式并确定用什么方式来解决&#xff0c;第二步化简&#xff0c;化简方式一共有7种&#xff0c;分别是最重要的三种&#xff08;等价替换、拆分极限存在的项、计算非零因子&#xff09;以及次重要的4种&#xf…...

编程日记 2023/12/4 4:00:07

Linux-usb触摸板去除鼠标箭头

usb触摸板会同时加载hid-generic.c和hid-multitouch.c驱动 [ 213.602561] usb 4-1: new full-speed USB device number 2 using ohci-platform [ 213.834953] usb 4-1: New USB device found, idVendor6615, idProduct108c, bcdDevice 1.30 [ 213.835048] usb 4-1: New USB…...

编程日记 2023/12/4 3:57:04

【微信小程序】英文字母不换行问题 flex布局字符超出宽度折行问题：设置了word-break: break-all；和flex: 1；冲突flex不生效问题

flex布局中英文字符超出宽度不会自动折行的问题&#xff0c;但是设置了word-break: break-all&#xff1b;前面设置的flex: 1&#xff1b;就不生效了 1.英文字母不换行问题 .view_text {word-break: break-all; }如果使用flex仅仅设置word-break: break-all&#xff1b;是会影…...

编程日记 2023/12/4 3:55:01

python--自动化办公（Word）

python自动化办公之—Word python-docx库 1、安装python-docx库 pip install python-docx2、基本语法 1、打开文档 document Document() 2、加入标题 document.add_heading(总标题,0) document.add_heading(⼀级标题,1) document.add_heading(⼆级标题,2) 3、添加文本 para…...

编程日记 2023/12/4 3:54:00

sourceTree的下载和安装

sourceTree的下载和安装 一、概述 SourceTree 是一款免费的 Git 和 Hg 客户端管理工具&#xff0c;支持 Git 项目的创建、克隆、提交、push、pull 和合并等操作。它拥有一个精美简洁的界面&#xff0c;大大简化了开发者与代码库之间的 Git 操作方式&#xff0c;这对于不熟悉 …...

编程日记 2023/12/4 3:48:55

解决：ModuleNotFoundError: No module named ‘PyQt5‘

解决&#xff1a;ModuleNotFoundError: No module named ‘PyQt5’ 文章目录 解决&#xff1a;ModuleNotFoundError: No module named PyQt5背景报错问题报错翻译报错位置代码报错原因解决方法安装PyQt5在PyCharm中配置PyQt5对于新项目对于已有项目 今天的分享就到此结束了 背景…...

编程日记 2023/12/4 3:47:54

极客时间 - 如何成为学习高手【文章笔记 + 思考总结】

如何成为学习高手【文章笔记 思考总结】 高度自律 高度自律 5分钟起步法。 稍微走在计划前面。 替代拖延法。 自律&#xff1a;从不自律的念头中&#xff0c;约束自己。有变弱倾向时进行对抗。 在一种痛苦和另一种痛苦之间做选择&#xff0c;选择那个有意义的痛苦。 在某些固…...

编程日记 2023/12/4 3:45:52

前端笔记（二）：CSS 选择器与特性

CSS&#xff08;层叠样式表&#xff09;是一种样式表语言&#xff0c;用于描述HTML或XML文档的呈现方式。它定义了如何在屏幕、纸张或其他媒体上显示文档的样式、布局和外观。 里面的代码由 选择器 { } 组成 体验 CSS CSS 可以让我们界面变得更加美观&#xff0c;这是 CSS 的…...

编程日记 2023/12/4 3:44:52

【每日一题】1423. 可获得的最大点数-2023.12.3

题目&#xff1a; 1423. 可获得的最大点数 几张卡牌 排成一行&#xff0c;每张卡牌都有一个对应的点数。点数由整数数组 cardPoints 给出。 每次行动&#xff0c;你可以从行的开头或者末尾拿一张卡牌&#xff0c;最终你必须正好拿 k 张卡牌。 你的点数就是你拿到手中的所有…...

编程日记 2023/12/4 3:43:51

VSCode修改C++版本

新下载了一下VSCode&#xff0c;想使用C17的特性std::optional&#xff0c;但是显示有错误&#xff0c;想想可能是C 版本的问题&#xff0c;查了一下资料&#xff0c;按下面的博客操作&#xff0c;果然解决了。 vscode设置c 版本...

编程日记 2023/12/4 3:39:47

31-WEB漏洞-文件操作之文件包含漏洞全解

31-WEB漏洞-文件操作之文件包含漏洞全解 一、本地包含1.1、无限制包含漏洞文件1.2、有限制包含漏洞文件1.2.1、绕过方法1.2.1.1、%00截断1.2.1.2、长度截断 二、远程包含2.1、无限制包含漏洞文件2.2、有限制包含漏洞文件 三、各种协议流提交流3.1、各协议的利用条件和方法3.1.1…...

编程日记 2023/12/4 3:38:47

预约系统源码解析：打造智能定制化预约服务的技术奇迹

在当今数字化时代&#xff0c;预约系统的重要性日益凸显&#xff0c;而预约系统源码的开放将为各行业带来更加灵活、智能的预约解决方案。本文将深入探讨预约系统源码的技术内幕&#xff0c;为开发者提供实用的代码示例&#xff0c;助力打造智能定制化的预约服务。 技术栈概览…...

编程日记 2023/12/4 3:30:41

关于Maxscript你了解多少？

MAXScript是Autodesk 3dMax的内置脚本语言。MAXScript为3dMax用户提供了以下功能&#xff1a; 编写程序使用的大部分方面的脚本&#xff0c;如建模、动画、材质、渲染等。 通过命令行侦听器窗口以交互方式控制程序。 在自定义实用工具面板卷展栏或无模式窗口中打包脚本&…...

编程日记 2023/12/4 3:29:39

Xshell全局去除提示音

使用Xshell的时候经常会按TAB或者一些操作指令的时候的时候听到提示音&#xff0c;非常的烦 通常来说在Xshell中可以单独修改每一个会话的属性&#xff0c;将提示音关闭&#xff0c;但是新增的会话依然带有提示音&#xff0c;还得一个个的关闭&#xff0c;非常麻烦&#xff0c;…...

编程日记 2023/12/4 3:23:35

JAVA代码优化：Spring中redis的工具类

基于Spring框架和Redis的缓存工具类。该类提供了一系列方法用于操作Redis缓存&#xff0c;包括设置缓存对象、设置缓存超时时间、获取缓存对象、删除对象、缓存List、Set、Map等操作。通过这些方法可以方便地对Redis进行数据缓存和读取操作。同时&#xff0c;该类使用了Spring的…...

编程日记 2023/12/4 3:22:34

MathType 7.5.2中文版软件使用期到了怎么办？

MathType 7.5.2中文版作为一款专业的公式编辑器&#xff0c;MathType受到很多人的青睐&#xff0c;它可以将编辑好的公式保存成多种图片格式或透明图片模式&#xff0c;可以很方便的添加或移除符号、表达式等模板&#xff08;只需要简单地用鼠标拖进拖出即可)&#xff0c;也可以…...

编程日记 2023/12/4 3:21:33

DOM 事件的注册和移除

前端面试大全DOM 事件的注册和移除 &#x1f31f;经典真题 &#x1f31f;DOM 注册事件 HTML 元素中注册事件 DOM0 级方式注册事件 DOM2 级方式注册事件 &#x1f31f;DOM 移除事件 &#x1f31f;真题解答 &#x1f31f;总结 &#x1f31f;经典真题 总结一下 DOM 中如何…...

编程日记 2023/12/4 3:18:28

挖漏洞之SQL注入

&#xff08;一&#xff09;漏洞原理 1、 漏洞原理 SQL注入的原理是&#xff0c;是应用系统没有对传递的参数进行过滤&#xff0c;让参数直接拼接到SQL语句中&#xff0c;攻击通过对参数进行篡改&#xff0c;当参数传递到数据库中&#xff0c;逻辑上就会发生变化&#xff0c;就…...

编程日记 2023/12/4 3:16:27

面试篇之微服务（二）

目录 服务容灾 21.什么是服务雪崩&#xff1f; 22.什么是服务熔断&#xff1f;什么是服务降级&#xff1f; 什么是服务熔断&#xff1f; 什么是服务降级&#xff1f; 有哪些熔断降级方案实现&#xff1f; 23.Hystrix怎么实现服务容错&#xff1f; 24.Sentinel怎么实现限…...

编程日记 2023/12/4 3:15:25

java封装详解

/*** Description 封装详解*/ package com.oop;import com.oop.demo04.Student; /*1.提高程序的安全性&#xff0c;保护数据2.隐藏代码的实现细节3.统一接口4.系统可维护增加了*/ public class Application {public static void main(String[] args) {Student s1 new Student(…...

编程日记 2023/12/4 3:13:22

Make sure bypassing Vue built-in sanitization is safe here.

一、问题描述 二、问题分析 XSS(跨站脚本攻击) XSS攻击通常指的是通过利用网页开发时留下的漏洞&#xff0c;通过巧妙的方法注入恶意指令代码到网页&#xff0c;使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript&#xff0c;但实际上也可以包括J…...

编程日记 2023/12/4 3:11:20

企业的内容站点SEO应该怎么做更有效果？

在当今数字化时代&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;已成为企业内容站点不可或缺的一部分。通过优化网站的结构、内容和链接等方面&#xff0c;企业可以提高其在搜索引擎中的排名&#xff0c;吸引更多的潜在客户&#xff0c;并增加品牌曝光度。那么&#xff…...

编程日记 2023/12/4 3:10:19

mac电脑下载Netflix Mac(奈飞客户端)安装教程

Netflix Mac&#xff0c;奈飞官方客户端&#xff0c;带给您无限的电影和剧集体验&#xff01;与朋友分享最新热门剧集、电影&#xff0c;与家人一起享受高品质的流媒体内容。 通过Netflix Mac&#xff0c;您可以轻松地搜索、浏览和观看各种类型的影片&#xff0c;包括剧情片、…...

编程日记 2023/12/4 3:08:18

PCL 计算点云图中任意两点的欧式距离

目录 一、算法原理二、代码实现三、结果展示四、相关链接本文由CSDN点云侠原创，原文链接。如果你不是在点云侠的博客中看到该文章，那么此处便是不要脸的爬虫与GPT。 一、算法原理 使用PCL实现在可视化界面上用鼠标点选两个点，输出两点的坐标和两点之间的欧式距离。 二、代码…...

编程日记 2023/12/4 3:05:15

使用OssImport 工具将文件上传到阿里云OSS

前言 OssImport 工具由阿里云OSS 提供 使用 OssImport 将文件上传到阿里云OSS 参考这里 参考 使用OssImport 将阿里云服务器ECS上的文件上传到阿里云OSS ossimport概述 使用ossimport迁移数据...

编程日记 2023/12/4 3:03:14

充电桩新老国标兼容性分析

1、背景介绍 1.1、充电桩相关标准发展历程 1.2、兼容性分析历史 1.3、兼容性分析的目的 1.4、兼容性分析的内容 2、B类协议兼容性分析 2.1、协议分层结构 2.2、链路层分析 2.3、版本协商与链路检测 ## 2.4、传输层分析 2.5、应用层 2.5.1、应用层数据 2.5.2、应用层数据…...

编程日记 2023/12/4 3:02:13

ApiSix的docker 容器化部署及使用

⼀&#xff0e;etcd安装 Docekr安装Etcd 环境准备 此处安装&#xff0c;是利⽤下载的 etcd 源⽂件&#xff0c;利⽤ docker build 构建完整镜像&#xff0c;具体操作如下&#xff1a; 1.环境准备 1.1. 新建⽂件夹 在磁盘某个路径下新建⼀个⽂件夹&#xff0c;⽤处操作 Dockerfi…...

编程日记 2023/12/4 3:01:12

第十节HarmonyOS 使用资源引用类型

Resource是资源引用类型&#xff0c;用于设置组件属性的值。推荐大家优先使用Resource类型&#xff0c;将资源文件&#xff08;字符串、图片、音频等&#xff09;统一存放于resources目录下&#xff0c;便于开发者统一维护。同时系统可以根据当前配置加载合适的资源&#xff0c…...

编程日记 2023/12/4 3:00:10

ntopng如何将漏洞扫描与流量监控相结合，以提高网络安全性

来源&#xff1a;艾特保IT 虹科干货 | ntopng如何将漏洞扫描与流量监控相结合&#xff0c;以提高网络安全性 欢迎关注虹科&#xff0c;为您提供最新资讯&#xff01; ntopng为人所知的“身份”是被动流量监控。然而&#xff0c;如今的ntopng6.0也进化出主动监控功能来&#xf…...

编程日记 2023/12/4 2:59:09