前端学习-事件委托（三十）
目录
前言
课前思考
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.事件委托是委托给了谁，父元素还是子元素 3.如何找到真正触发的元素 示例代码 总结 前言 才子佳人，自是白衣卿相 课前思考 1.如果同时给多个元素注册事件&…...
线程池以及在QT中的接口使用
文章目录 前言线程池架构组成**一、任务队列（Task Queue）****二、工作线程组（Worker Threads）****三、管理者线程（Manager Thread）** 系统协作流程图解 一、QRunnable二、QThreadPool三、线程池的应用场景W…...
c语言操作符（详细讲解）
目录 前言 一、算术操作符 一元操作符： 二元操作符： 二、赋值操作符 代码例子： 三、比较操作符 相等与不相等比较操作符： 大于和小于比较操作符： 大于等于和小于等于比较操作符： 四、逻辑操作符 逻辑与&…...
【自然语言处理（NLP）】深度学习架构：Transformer 原理及代码实现
文章目录 介绍Transformer核心组件架构图编码器（Encoder）解码器（Decoder） 优点应用代码实现导包基于位置的前馈网络残差连接后进行层规范化编码器 Block编码器解码器 Block解码器训练预测 个人主页：道友老李 欢迎加入社…...
JavaScript 入门教程
JavaScript 入门教程 JavaScript 入门教程引言学习 JavaScript 的好处常见的 JavaScript 框架和库 安装开发环境下载并安装 Node.js 和 npm安装常用开发工具（如 VS Code）配置本地开发环境 基础语法入门数据类型变量与常量运算符算术运算符比较运算符 条件…...
浅析CDN安全策略防范
CDN（内容分发网络）信息安全策略是保障内容分发网络在提供高效服务的同时，确保数据传输安全、防止恶意攻击和保护用户隐私的重要手段。以下从多个方面详细介绍CDN的信息安全策略： 1. 数据加密 数据加密是CDN信息安全策略的核心之…...
代码随想录刷题day22|（字符串篇）344.反转字符串、541.反转字符串 II
目录 一、题目思路 二、相关题目 三、总结与知识点 3.1 字符数组转换成字符串 一、题目思路 344反转字符串比较容易，双指针即可在空间复杂度为O(1)的基础上解决； 541反转字符串II ：其中for循环中 i 每次的取值，不是 i&#…...
python学opencv|读取图像（五十三）原理探索：使用cv.matchTemplate()函数实现最佳图像匹配
【1】引言 前序学习进程中，已经探索了使用cv.matchTemplate()函数实现最佳图像匹配的技巧，并且成功对两个目标进行了匹配。 相关文章链接为：python学opencv|读取图像（五十二）使用cv.matchTemplate()函数实现最佳图像…...
win10部署本地deepseek-r1，chatbox，deepseek联网（谷歌网页插件Page Assist）
win10部署本地deepseek-r1，chatbox，deepseek联网（谷歌网页插件Page Assist） 前言一、本地部署DeepSeek-r1step1 安装ollamastep2 下载deepseek-r1step2.1 找到模型deepseek-r1step2.2 cmd里粘贴 后按回车，进行下载 ste…...
冯·诺依曼体系结构
目录 冯诺依曼体系结构推导 内存提高冯诺依曼体系结构效率的方法 你使用QQ和朋友聊天时，整个数据流是怎么流动的（不考虑网络情况） 与冯诺依曼体系结构相关的一些知识 冯诺依曼体系结构推导 计算机的存在就是为了解决问题，而解…...
本地部署 DeepSeek-R1 模型
文章目录 霸屏的AIDeepSeek是什么？安装DeepSeek安装图形化界面总结 霸屏的AI 最近在刷视频的时候，总是突然突然出现一个名叫 DeepSeek 的玩意，像这样： 这样： 这不经激起我的一顿好奇心，这 DeepSeek 到底是个…...
Mybatis——sql映射文件中的增删查改
映射文件内的增删查改 准备工作 准备一张数据表，用于进行数据库的相关操作。新建maven工程， 导入mysql-connector-java和mybatis依赖。新建一个实体类，类的字段要和数据表的数据对应编写接口编写mybatis主配置文件 public class User {priva…...
【开源免费】基于Vue和SpringBoot的流浪宠物管理系统（附论文）
本文项目编号 T 182 ，文末自助获取源码 \color{red}{T182，文末自助获取源码} T182，文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…...
nth_element函数——C++快速选择函数
目录 1. 函数原型 2. 功能描述 3. 算法原理 4. 时间复杂度 5. 空间复杂度 6. 使用示例 8. 注意事项 9. 自定义比较函数 11. 总结 nth_element 是 C 标准库中提供的一个算法，位于 <algorithm> 头文件中，用于部分排序序列。它的主要功能是将…...
DNS缓存详解（DNS Cache Detailed Explanation）
DNS缓存详解 清空DNS缓存可以让网页访问更快捷。本文将从什么是DNS缓存、为什么清空DNS缓存、如何清空DNS缓存、清空DNS缓存存在的问题四个方面详细阐述DNS缓存清空的相关知识。 一、什么是DNS缓存 1、DNS缓存的定义： DNS缓存是域名系统服务在遇到DNS查询时自动…...
课设：【ID0022】火车票售票管理系统（前端）
技术栈：Java，JavaSwing，MySQL 数据库表数量：12个 1.功能描述 管理员功能 管理员是系统的高级用户，拥有对整个系统的全面管理权限。管理员的功能模块包括以下六个方面： 对用户管理增删查改 对售票员…...
Ruby 类和对象
Ruby 类和对象 引言 在软件开发中，类和对象是面向对象编程（OOP）的核心概念。Ruby 作为一种动态、解释型编程语言，也以简洁的方式支持面向对象编程。本文将深入探讨 Ruby 中的类和对象，包括它们的定义、创建、使用以及一些高级特性。 类与对象的定义 类 在 Ruby 中，类…...
Java基础知识总结（三十八）--读取数据
使用Reader体系，读取一个文本文件中的数据。返回 -1 ，标志读到结尾。 import java.io.*; class { public static void main(String[] args) throws IOException { /* 创建可以读取文本文件的流对象，让创建好的流对象和指定的文件相关联。…...
交错定理和切比雪夫节点的联系与区别
1. 交错定理 交错定理是切比雪夫逼近理论的核心内容，描述在区间[a,b]上，一个函数 f ( x ) f(x) f(x)的最佳一致逼近多项式 P n ( x ) P_n(x) Pn(x)的特性。定理内容如下： 设 f ( x ) f(x) f(x)是区间[a,b]上的连续函数， P n ( …...
大数据相关职位介绍之三（数据挖掘，数据安全 ，数据合规师，首席数据官，数据科学家 ）
大数据相关职位介绍之三（数据挖掘，数据安全 ，数据合规师，首席数据官，数据科学家 ） 文章目录 大数据相关职位介绍之三（数据挖掘，数据安全 ，数据合规师，首席数据…...
多模态2025：技术路线“神仙打架”，视频生成冲上云霄
文｜魏琳华 编｜王一粟 一场大会，聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中，汇集了学界、创业公司和大厂等三方的热门选手，关于多模态的集中讨论达到了前所未有的热度。其中，…...
令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结： 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析： 实际业务去理解体会统一注…...
深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么？1.1.2 感知机的工作原理 1.2 感知机的简单应用：基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...
Mysql8 忘记密码重置，以及问题解决
1.使用免密登录 找到配置MySQL文件，我的文件路径是/etc/mysql/my.cnf，有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...
LabVIEW双光子成像系统技术
双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制，展现出显著的技术优势： 深层组织穿透能力：适用于活体组织深度成像 高分辨率观测性能：满足微观结构的精细研究需求 低光毒性特点：减少对样本的损伤…...
MySQL 索引底层结构揭秘：B-Tree 与 B+Tree 的区别与应用
文章目录 一、背景知识：什么是 B-Tree 和 BTree？ B-Tree（平衡多路查找树） BTree（B-Tree 的变种） 二、结构对比：一张图看懂 三、为什么 MySQL InnoDB 选择 BTree？ 1. 范围查询更快 2…...
实战三：开发网页端界面完成黑白视频转为彩色视频
一、需求描述 设计一个简单的视频上色应用，用户可以通过网页界面上传黑白视频，系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观，不需要了解技术细节。 效果图 二、实现思路 总体思路： 用户通过Gradio界面上…...
【Linux手册】探秘系统世界：从用户交互到硬件底层的全链路工作之旅
目录 前言 操作系统与驱动程序 是什么，为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中，我们在使用电子设备时，我们所输入执行的每一条指令最终大多都会作用到硬件上，比如下载一款软件最终会下载到硬盘上&am…...
微服务通信安全：深入解析mTLS的原理与实践
🔥「炎码工坊」技术弹药已装填！ 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、引言：微服务时代的通信安全挑战 随着云原生和微服务架构的普及，服务间的通信安全成为系统设计的核心议题。传统的单体架构中&…...
[USACO23FEB] Bakery S
题目描述 Bessie 开了一家面包店! 在她的面包店里，Bessie 有一个烤箱，可以在 t C t_C tC 的时间内生产一块饼干或在 t M t_M tM 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC,tM≤109)。由于空间…...