前端学习-事件委托（三十）
目录
前言
课前思考
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 ( …...
大数据相关职位介绍之三（数据挖掘，数据安全 ，数据合规师，首席数据官，数据科学家 ）
大数据相关职位介绍之三（数据挖掘，数据安全 ，数据合规师，首席数据官，数据科学家 ） 文章目录 大数据相关职位介绍之三（数据挖掘，数据安全 ，数据合规师，首席数据…...
Zustand 状态管理库：极简而强大的解决方案
Zustand 是一个轻量级、快速和可扩展的状态管理库，特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...
JavaScript 中的 ES|QL：利用 Apache Arrow 工具
作者：来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗？了解下一期 Elasticsearch Engineer 培训的时间吧！ Elasticsearch 拥有众多新功能，助你为自己…...
多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 （一）多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如，当用户上传一张“蓝色连衣裙”的图片时，接口可自动提取图像中的颜色（RGB值&…...
成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战
在现代战争中，电磁频谱已成为继陆、海、空、天之后的 “第五维战场”，雷达作为电磁频谱领域的关键装备，其干扰与抗干扰能力的较量，直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器，凭借数字射…...
高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数 在软件开发中，单例模式（Singleton Pattern）是一种常见的设计模式，确保一个类仅有一个实例，并提供一个全局访问点。在多线程环境下，实现单例模式时需要注意线程安全问题，以防止多个线程同时创建实例，导致…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了，要么要会员、要么写的乱七八糟。这里我整理一下，把问题说清楚并且给出代码，拿去用就行，照着葫芦画瓢。 问题 在继承QWebEngineView后，重写mousePressEvent或event函数无法捕获鼠标按下事…...
Kafka入门-生产者
生产者 生产者发送流程： 延迟时间为0ms时，也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于：异步发送不需要等待结果，同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...
深入理解Optional：处理空指针异常
1. 使用Optional处理可能为空的集合 在Java开发中，集合判空是一个常见但容易出错的场景。传统方式虽然可行，但存在一些潜在问题： // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...
GeoServer发布PostgreSQL图层后WFS查询无主键字段
在使用 GeoServer（版本 2.22.2） 发布 PostgreSQL（PostGIS）中的表为地图服务时，常常会遇到一个小问题： WFS 查询中，主键字段（如 id）莫名其妙地消失了！ 即使你在…...
HTML中各种标签的作用
一、HTML文件主要标签结构及说明 1. <！DOCTYPE html> 作用：声明文档类型，告知浏览器这是 HTML5 文档。 必须：是。 2. <html lang“zh”>. </html> 作用：包裹整个网页内容，lang"z…...