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

前端学习-事件委托（三十）

news 文章来源：https://blog.csdn.net/m0_74246993/article/details/145407264 2025/4/21 23:42:46

目录

前言

课前思考

for循环注册事件

语法

事件委托

1.事件委托的好处是什么?

2.事件委托是委托给了谁，父元素还是子元素

3.如何找到真正触发的元素

示例代码

总结

前言

才子佳人，自是白衣卿相

课前思考

1.如果同时给多个元素注册事件，我们怎么做的?

for循环注册事件

语法

const lis = document.querySelectorAll('ul li');for(leti=0;i< lis.length; i++){lis[i].addEventListener('click',function(){alert('我被点击了')})

2.有没有一种技巧 注册一次事件就能完成以上效果呢?

事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧

优点:减少注册次数，可以提高程序性能原理:事件委托其实是利用事件冒泡的特点。给父元素注册事件，当我们触发子元素的时候，会冒泡到元素身上，从而触发父元素的事件

1.事件委托的好处是什么?

减少注册次数，提高程序性能

2.事件委托是委托给了谁，父元素还是子元素

3.如何找到真正触发的元素

事件对象.target.tagName

示例代码

<!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>.highlight {background-color: red;}</style>
</head>
​
<body><ul><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><p>我是p标签</p></ul><script>const ul = document.querySelector('ul');ul.addEventListener('click', function (e) {if (e.target.tagName === 'LI') {e.target.classList.toggle('highlight');}});</script>
</body>
​
</html>

总结

斗酒彘肩，风雨渡江

相关文章：

前端学习-事件委托（三十）

目录 前言 课前思考 for循环注册事件 语法 事件委托 1.事件委托的好处是什么? 2.事件委托是委托给了谁&#xff0c;父元素还是子元素 3.如何找到真正触发的元素 示例代码 总结 前言 才子佳人&#xff0c;自是白衣卿相 课前思考 1.如果同时给多个元素注册事件&…...

编程日记 2025/2/2 19:21:17

线程池以及在QT中的接口使用

文章目录 前言线程池架构组成**一、任务队列&#xff08;Task Queue&#xff09;****二、工作线程组&#xff08;Worker Threads&#xff09;****三、管理者线程&#xff08;Manager Thread&#xff09;** 系统协作流程图解 一、QRunnable二、QThreadPool三、线程池的应用场景W…...

编程日记 2025/2/2 19:19:13

c语言操作符（详细讲解）

目录 前言 一、算术操作符 一元操作符&#xff1a; 二元操作符&#xff1a; 二、赋值操作符 代码例子&#xff1a; 三、比较操作符 相等与不相等比较操作符&#xff1a; 大于和小于比较操作符&#xff1a; 大于等于和小于等于比较操作符&#xff1a; 四、逻辑操作符 逻辑与&…...

编程日记 2025/2/2 19:17:10

【自然语言处理（NLP）】深度学习架构：Transformer 原理及代码实现

文章目录 介绍Transformer核心组件架构图编码器&#xff08;Encoder&#xff09;解码器&#xff08;Decoder&#xff09; 优点应用代码实现导包基于位置的前馈网络残差连接后进行层规范化编码器 Block编码器解码器 Block解码器训练预测 个人主页&#xff1a;道友老李 欢迎加入社…...

编程日记 2025/2/2 19:08:00

JavaScript 入门教程

JavaScript 入门教程 JavaScript 入门教程引言学习 JavaScript 的好处常见的 JavaScript 框架和库 安装开发环境下载并安装 Node.js 和 npm安装常用开发工具&#xff08;如 VS Code&#xff09;配置本地开发环境 基础语法入门数据类型变量与常量运算符算术运算符比较运算符 条件…...

编程日记 2025/2/2 19:01:51

浅析CDN安全策略防范

CDN&#xff08;内容分发网络&#xff09;信息安全策略是保障内容分发网络在提供高效服务的同时&#xff0c;确保数据传输安全、防止恶意攻击和保护用户隐私的重要手段。以下从多个方面详细介绍CDN的信息安全策略&#xff1a; 1. 数据加密 数据加密是CDN信息安全策略的核心之…...

编程日记 2025/2/2 18:54:36

代码随想录刷题day22|（字符串篇）344.反转字符串、541.反转字符串 II

目录 一、题目思路 二、相关题目 三、总结与知识点 3.1 字符数组转换成字符串 一、题目思路 344反转字符串比较容易&#xff0c;双指针即可在空间复杂度为O(1)的基础上解决&#xff1b; 541反转字符串II &#xff1a;其中for循环中 i 每次的取值&#xff0c;不是 i&#…...

编程日记 2025/2/2 18:53:33

python学opencv|读取图像（五十三）原理探索：使用cv.matchTemplate()函数实现最佳图像匹配

【1】引言 前序学习进程中&#xff0c;已经探索了使用cv.matchTemplate()函数实现最佳图像匹配的技巧&#xff0c;并且成功对两个目标进行了匹配。 相关文章链接为&#xff1a;python学opencv|读取图像&#xff08;五十二&#xff09;使用cv.matchTemplate()函数实现最佳图像…...

编程日记 2025/2/2 18:51:30

win10部署本地deepseek-r1，chatbox，deepseek联网（谷歌网页插件Page Assist）

win10部署本地deepseek-r1&#xff0c;chatbox&#xff0c;deepseek联网&#xff08;谷歌网页插件Page Assist&#xff09; 前言一、本地部署DeepSeek-r1step1 安装ollamastep2 下载deepseek-r1step2.1 找到模型deepseek-r1step2.2 cmd里粘贴 后按回车&#xff0c;进行下载 ste…...

编程日记 2025/2/2 18:47:26

冯·诺依曼体系结构

目录 冯诺依曼体系结构推导 内存提高冯诺依曼体系结构效率的方法 你使用QQ和朋友聊天时&#xff0c;整个数据流是怎么流动的&#xff08;不考虑网络情况&#xff09; 与冯诺依曼体系结构相关的一些知识 冯诺依曼体系结构推导 计算机的存在就是为了解决问题&#xff0c;而解…...

编程日记 2025/2/2 18:46:21

本地部署 DeepSeek-R1 模型

文章目录 霸屏的AIDeepSeek是什么&#xff1f;安装DeepSeek安装图形化界面总结 霸屏的AI 最近在刷视频的时候&#xff0c;总是突然突然出现一个名叫 DeepSeek 的玩意&#xff0c;像这样&#xff1a; 这样&#xff1a; 这不经激起我的一顿好奇心&#xff0c;这 DeepSeek 到底是个…...

编程日记 2025/2/2 18:40:10

Mybatis——sql映射文件中的增删查改

映射文件内的增删查改 准备工作 准备一张数据表&#xff0c;用于进行数据库的相关操作。新建maven工程&#xff0c; 导入mysql-connector-java和mybatis依赖。新建一个实体类&#xff0c;类的字段要和数据表的数据对应编写接口编写mybatis主配置文件 public class User {priva…...

编程日记 2025/2/2 18:39:07

【开源免费】基于Vue和SpringBoot的流浪宠物管理系统（附论文）

本文项目编号 T 182 &#xff0c;文末自助获取源码 \color{red}{T182&#xff0c;文末自助获取源码} T182&#xff0c;文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…...

编程日记 2025/2/2 18:32:57

nth_element函数——C++快速选择函数

目录 1. 函数原型 2. 功能描述 3. 算法原理 4. 时间复杂度 5. 空间复杂度 6. 使用示例 8. 注意事项 9. 自定义比较函数 11. 总结 nth_element 是 C 标准库中提供的一个算法&#xff0c;位于 <algorithm> 头文件中&#xff0c;用于部分排序序列。它的主要功能是将…...

编程日记 2025/2/2 18:31:56

DNS缓存详解（DNS Cache Detailed Explanation）

DNS缓存详解 清空DNS缓存可以让网页访问更快捷。本文将从什么是DNS缓存、为什么清空DNS缓存、如何清空DNS缓存、清空DNS缓存存在的问题四个方面详细阐述DNS缓存清空的相关知识。 一、什么是DNS缓存 1、DNS缓存的定义&#xff1a; DNS缓存是域名系统服务在遇到DNS查询时自动…...

编程日记 2025/2/2 18:30:54

课设：【ID0022】火车票售票管理系统（前端）

技术栈&#xff1a;Java&#xff0c;JavaSwing&#xff0c;MySQL 数据库表数量&#xff1a;12个 1.功能描述 管理员功能 管理员是系统的高级用户&#xff0c;拥有对整个系统的全面管理权限。管理员的功能模块包括以下六个方面&#xff1a; 对用户管理增删查改 对售票员…...

编程日记 2025/2/2 18:23:46

Ruby 类和对象

Ruby 类和对象 引言 在软件开发中，类和对象是面向对象编程（OOP）的核心概念。Ruby 作为一种动态、解释型编程语言，也以简洁的方式支持面向对象编程。本文将深入探讨 Ruby 中的类和对象，包括它们的定义、创建、使用以及一些高级特性。 类与对象的定义 类 在 Ruby 中，类…...

编程日记 2025/2/2 18:21:43

Java基础知识总结（三十八）--读取数据

使用Reader体系&#xff0c;读取一个文本文件中的数据。返回 -1 &#xff0c;标志读到结尾。 import java.io.*; class { public static void main(String[] args) throws IOException { /* 创建可以读取文本文件的流对象&#xff0c;让创建好的流对象和指定的文件相关联。…...

编程日记 2025/2/2 18:11:29

交错定理和切比雪夫节点的联系与区别

1. 交错定理 交错定理是切比雪夫逼近理论的核心内容&#xff0c;描述在区间[a,b]上&#xff0c;一个函数 f ( x ) f(x) f(x)的最佳一致逼近多项式 P n ( x ) P_n(x) Pn​(x)的特性。定理内容如下&#xff1a; 设 f ( x ) f(x) f(x)是区间[a,b]上的连续函数&#xff0c; P n ( …...

编程日记 2025/2/2 18:10:18

大数据相关职位介绍之三（数据挖掘，数据安全 ，数据合规师，首席数据官，数据科学家 ）

大数据相关职位介绍之三&#xff08;数据挖掘&#xff0c;数据安全 &#xff0c;数据合规师&#xff0c;首席数据官&#xff0c;数据科学家 &#xff09; 文章目录 大数据相关职位介绍之三&#xff08;数据挖掘&#xff0c;数据安全 &#xff0c;数据合规师&#xff0c;首席数据…...

编程日记 2025/2/2 18:04:56

GitHub Actions定时任务配置完全指南：从Cron语法到实战示例

你好&#xff0c;我是悦创。 博客网站&#xff1a;https://blog.bornforthis.cn/ 本教程将详细讲解如何在GitHub Actions中配置定时任务&#xff08;Scheduled Tasks&#xff09;&#xff0c;帮助你掌握 Cron 表达式的编写规则和实际应用场景。 一、定时任务基础配置 1.1 核…...

编程日记 2025/2/2 18:01:49

Van-Nav：新年，将自己学习的项目地址统一整理搭建自己的私人导航站，供自己后续查阅使用，做技术的同学应该都有一个自己网站的梦想

嗨&#xff0c;大家好&#xff0c;我是小华同学&#xff0c;关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法 Van-Nav是一个基于Vue.js开发的导航组件库&#xff0c;它提供了多种预设的样式和灵活的配置选项&#xff0c;使得开发者可以轻松地定制出符合项目需求…...

编程日记 2025/2/2 17:59:46

Easy系列PLC尺寸测量功能块ST代码(激光微距仪应用)

激光微距仪可以测量短距离内的产品尺寸，产品规格书的测量 精度可以到0.001mm。具体需要看不同的型号。 1、激光微距仪 2、尺寸测量应用 下面我们以测量高度为例子，设计一个高度测量功能块，同时给出测量数据和合格不合格指标。 3、高度测量功能块 4、复位完成信号 5、功能…...

编程日记 2025/2/2 17:57:39

Manacher 最长回文子串

方法&#xff1a;求字符串的 #include<bits/stdc.h> using namespace std; using lllong long; const int N1e69; char s[N]; int p[N];int main() {cin>>s1;int nstrlen(s1);s[0]^;s[2*n2]$; for(int i2*n1;i>1;i--){s[i](i&1)?#:s[i>>1];//右移表示…...

编程日记 2025/2/2 17:55:37

51单片机开发：独立键盘实验

实验目的&#xff1a;按下键盘1时&#xff0c;点亮LED灯1。 键盘原理图如下图所示&#xff0c;可见&#xff0c;由于接GND&#xff0c;当键盘按下时&#xff0c;P3相应的端口为低电平。 键盘按下时会出现抖动&#xff0c;时间通常为5-10ms&#xff0c;代码中通过延时函数delay…...

编程日记 2025/2/2 17:52:33

组件框架漏洞

一.基础概念 1.组件 定义&#xff1a;组件是软件开发中具有特定功能或特性的可重用部件或模块&#xff0c;能独立使用或集成到更大系统。 类型 前端 UI 组件&#xff1a;像按钮、下拉菜单、导航栏等&#xff0c;负责构建用户界面&#xff0c;提升用户交互体验。例如在电商 AP…...

编程日记 2025/2/2 17:49:27

OFDM系统仿真

1️⃣ OFDM的原理 1.1 介绍 OFDM是一种多载波调制技术&#xff0c;将输入数据分配到多个子载波上&#xff0c;每个子载波上可以独立使用 QAM、PSK 等传统调制技术进行调制。这些子载波之间互相正交&#xff0c;从而可以有效利用频谱并减少干扰。 1.2 OFDM的核心 多载波调制…...

编程日记 2025/2/2 17:47:24

基于单片机的盲人智能水杯系统（论文+源码）

1 总体方案设计 本次基于单片机的盲人智能水杯设计&#xff0c;采用的是DS18B20实现杯中水温的检测&#xff0c;采用HX711及应力片实现杯中水里的检测&#xff0c;采用DS1302实现时钟计时功能&#xff0c;采用TTS语音模块实现语音播报的功能&#xff0c;并结合STC89C52单片机作…...

编程日记 2025/2/2 17:45:22

安心即美的生活方式

如果你的心是安定的&#xff0c;那么&#xff0c;外界也就安静了。就像陶渊明说的&#xff1a;心远地自偏。不是走到偏远无人的边荒才能得到片刻清净&#xff0c;不需要使用洪荒之力去挣脱生活的枷锁&#xff0c;这是陶渊明式的中国知识分子的雅量。如果你自己是好的男人或女人…...

编程日记 2025/2/2 17:37:11

安卓(android)订餐菜单【Android移动开发基础案例教程（第2版）黑马程序员】

一、实验目的&#xff08;如果代码有错漏&#xff0c;可查看源码&#xff09; 1.掌握Activity生命周的每个方法。 2.掌握Activity的创建、配置、启动和关闭。 3.掌握Intent和IntentFilter的使用。 4.掌握Activity之间的跳转方式、任务栈和四种启动模式。 5.掌握在Activity中添加…...

编程日记 2025/2/2 17:34:05