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

事件代理 浅谈

news 2026/3/28 6:45:36

事件代理是一种将事件处理委托给父元素或祖先元素来管理的技术。当子元素触发特定事件时，该事件不会直接在子元素上进行处理，而是会冒泡到父元素或祖先元素，并在那里进行处理。这样做的好处是可以减少事件处理函数的数量，提高性能，并且可以动态添加或删除子元素而无需重新绑定事件处理函数。

以下是一个使用事件代理的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Delegation Example</title>
<style>.container {border: 1px solid #ccc;padding: 20px;}.item {cursor: pointer;margin-bottom: 10px;}
</style>
</head>
<body><div class="container" id="container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div>
</div><script>
// 获取父元素
const container = document.getElementById('container');// 添加事件监听器到父元素上
container.addEventListener('click', function(event) {// 检查点击的元素是否为子元素if (event.target.classList.contains('item')) {// 如果是子元素，输出其文本内容console.log('Clicked item:', event.target.textContent);}
});
</script></body>
</html>

在这里插入图片描述在这里插入图片描述

在这个示例中，我们将点击事件绑定在父元素 .container 上。当点击子元素 .item 时，事件会冒泡到父元素，然后在父元素上进行处理。这样做的好处是无论我们添加或删除子元素，点击事件都能被正确地处理，而不需要重新绑定事件处理函数。

相关文章：

事件代理 浅谈

事件代理是一种将事件处理委托给父元素或祖先元素来管理的技术。当子元素触发特定事件时&#xff0c;该事件不会直接在子元素上进行处理&#xff0c;而是会冒泡到父元素或祖先元素&#xff0c;并在那里进行处理。这样做的好处是可以减少事件处理函数的数量&#xff0c;提高性能…...

编程日记 2024/5/12 4:16:47

一对多在线教育系统,疫情后，在线教育有哪些变革？

疫情期间&#xff0c;全面开展的在线教育经历了从不适应到认可投入并常态化的发展过程。如何发挥在线教学优势&#xff0c;深度融合线上与线下教育&#xff0c;将在线教育作为育人方式变革动力&#xff0c;提升育人服务水平&#xff0c;是复学复课后学校教育教学面临的关键问题…...

编程日记 2024/5/12 4:15:46

RabbitMQ（安装配置以及与SpringBoot整合）

文章目录 1.基本介绍2.Linux下安装配置RabbitMQ1.安装erlang环境1.将文件上传到/opt目录下2.进入/opt目录下&#xff0c;然后安装 2.安装RabbitMQ1.进入/opt目录&#xff0c;安装所需依赖2.安装MQ 3.基本配置1.启动MQ2.查看MQ状态3.安装web管理插件4.安装web管理插件超时的解决…...

编程日记 2024/5/12 4:11:42

JUC下的BlockingQueue详解

BlockingQueue是Java并发包(java.util.concurrent)中提供的一个接口&#xff0c;它扩展了Queue接口&#xff0c;增加了阻塞功能。这意味着当队列满时尝试入队操作&#xff0c;或者队列空时尝试出队操作&#xff0c;线程会进入等待状态&#xff0c;直到队列状态允许操作继续。这…...

编程日记 2024/5/12 4:10:40

ChatGPT理论分析

ChatGPT "ChatGPT"是一个基于GPT&#xff08;Generative Pre-trained Transformer&#xff09;架构的对话系统。GPT 是一个由OpenAI 开发的自然语言处理&#xff08;NLP&#xff09;模型&#xff0c;它使用深度学习来生成文本。以下是对ChatGPT进行理论分析的几个主…...

编程日记 2024/5/12 4:07:37

算法提高之魔板

算法提高之魔板 核心思想&#xff1a;最短路模型 将所有状态存入队列 更新步数 同时记录前驱状态 #include <iostream>#include <cstring>#include <algorithm>#include <unordered_map>#include <queue>using namespace std;string start&qu…...

编程日记 2024/5/12 4:06:36

服务器内存占用不足会怎么样，解决方案

在当今数据驱动的时代&#xff0c;服务器对于我们的工作和生活起着举足轻重的作用。而在众多影响服务器性能的关键因素当中&#xff0c;内存扮演着极其重要的角色。 服务器内存&#xff0c;也称RAM&#xff08;Random Access Memory&#xff09;&#xff0c;是服务器核心硬件部…...

编程日记 2024/5/12 4:05:35

elasticsearch文档读写原理大致分析一下

文档写简介 客户端通过hash选择一个node发送请求&#xff0c;专业术语叫做协调节点 协调节点会对document进行路由&#xff0c;将请求转发给对应的primary shard primary shard在处理完数据后&#xff0c;会将document 同步到所有replica shard 协调节点将处理结果返回给…...

编程日记 2024/5/12 4:04:34

1 开发环境

开发环境&#xff08;platformio python arduino框架&#xff09;的搭建可以参考b站upESP32超详细教程-使用VSCode&#xff08;基于Arduino框架&#xff09;哔哩哔哩bilibili 这里推荐离线安装esp32库文件&#xff0c;要不然要等很久&#xff08;b站教程很多&#xff09; 搭…...

编程日记 2024/5/12 4:03:33

云视频，也称为视频云服务，是一种基于云计算技术理念的视频流媒体服务

云视频&#xff0c;也称为视频云服务&#xff0c;是一种基于云计算技术理念的视频流媒体服务。它基于云计算商业模式&#xff0c;为视频网络平台服务提供强大的支持。在云平台上&#xff0c;所有的视频供应商、代理商、策划服务商、制作商、行业协会、管理机构、行业媒体和法律…...

编程日记 2024/5/12 4:02:31

[Vision Board创客营]--使用openmv识别阿尼亚

文章目录 [Vision Board创客营]使用openmv识别阿尼亚介绍环境搭建训练模型上传图片生成模型 使用结语 [Vision Board创客营]使用openmv识别阿尼亚 &#x1f680;&#x1f680;五一和女朋友去看了《间谍过家家 代号&#xff1a;白》&#xff0c;入坑二刺螈&#xff08;QQ头像也换…...

编程日记 2024/5/12 4:00:29

【Linux：lesson1】的基本指令

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;Linux课程学习 &#x1f337;追光的人&#xff0c;终会万丈光芒 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 目录 &#x1f697;打开Xshell&#xff0c;登陆root…...

编程日记 2024/5/12 3:59:28

20240511日记

今天工作内容&#xff1a; 1.二期2号机EAP测试 2.二期开门机器暂停&#xff08;停轴&#xff0c;停流水线电机&#xff09;&#xff0c;关闭门后继续功能测试 3.针点位偏移还需要调整&#xff0c;未进行大批量验证是否偏移&#xff08;S3模板点位测试&#xff0c;两台机各焊…...

编程日记 2024/5/12 3:58:27

蓝桥杯成绩已出

蓝桥杯的成绩早就已经出来了&#xff0c;虽然没有十分惊艳 &#xff0c;但是对于最终的结果我是心满意足的&#xff0c;感谢各位的陪伴&#xff0c;关于蓝桥杯的刷题笔记我已经坚持更新了49篇&#xff0c;但是现在即将会告别一段落&#xff0c;人生即将进入下一个规划。我们一起…...

编程日记 2024/5/12 3:55:23

.kat6.l6st6r勒索病毒数据怎么处理|数据解密恢复

导言&#xff1a; 在数字时代的洪流中&#xff0c;网络安全领域的新挑战层出不穷。近期&#xff0c;.kat6.l6st6r勒索病毒的出现再次打破了传统安全防护的界限。这种新型勒索病毒不仅具有高超的加密技术&#xff0c;更以其独特的传播方式和隐蔽性&#xff0c;给全球用户带来了…...

编程日记 2024/5/12 3:54:22

Spring Batch 是什么？主要用于什么场景？

Spring Batch是一个开源的、基于Spring框架的批量处理框架&#xff0c;它提供了一系列用于批量数据处理的工具和API。Spring Batch的主要目标是简化和标准化批量数据的处理过程&#xff0c;使得开发者可以更加专注于业务逻辑的实现&#xff0c;而不是批量处理的复杂性。 Sprin…...

编程日记 2024/5/12 3:52:20

SQL-慢查询的定位及优化

定位慢查询sql 启用慢查询日志&#xff1a; 确保MySQL实例已经启用了慢查询日志功能。可以通过以下命令查看是否启用&#xff1a; SHOW VARIABLES LIKE slow_query_log;如果未启用&#xff0c;可以通过以下命令启用&#xff1a; SET GLOBAL slow_query_log ON;配置慢查询日志&…...

编程日记 2024/5/12 3:51:19

练习题（2024/5/11）

1逆波兰表达式求值 给你一个字符串数组 tokens &#xff0c;表示一个根据 逆波兰表示法 表示的算术表达式。 请你计算该表达式。返回一个表示表达式值的整数。 注意&#xff1a; 有效的算符为 、-、* 和 / 。每个操作数&#xff08;运算对象&#xff09;都可以是一个整数或…...

编程日记 2024/5/12 3:48:16

linux系统服务器中常见故障及排查方法

目录 故障1&#xff1a;系统无响应 故障2&#xff1a;网络连接问题 故障3&#xff1a;文件系统错误 故障4&#xff1a;软件包依赖问题 故障5&#xff1a;用户权限问题 故障6&#xff1a;服务无法正常工作 故障7&#xff1a;磁盘空间不足 故障8&#xff1a;内存不足 故障…...

编程日记 2024/5/12 3:47:15

产品人生（5）：从“敏捷开发”到“四化时间管理法”

人生如产品&#xff0c;产品映人生&#xff0c;借鉴产品思维&#xff0c;快速提升软技能&#xff01; 在互联网的敏捷开发实践中&#xff0c;经常会用到“流程化、模板化、清单化、不断优化”的思想来提升开发的效率和产品质量&#xff0c;并确保团队能够快速响应市场变化。大…...

编程日记 2024/5/12 3:46:14

智能网联汽车(CAV)缩略语大全：从C-V2X到VRUCW，一文搞懂所有专业术语

智能网联汽车(CAV)术语全解析&#xff1a;从技术原理到场景应用 在智能交通系统快速发展的今天&#xff0c;智能网联汽车(Connected-Automated Vehicle, CAV)已经成为行业变革的核心驱动力。无论是汽车工程师、软件开发人员还是交通规划者&#xff0c;都需要掌握这一领域的关键…...

编程新知 2026/3/28 6:26:41

StructBERT-Large本地化部署实战：无需联网、不传数据、隐私安全的语义匹配解决方案

StructBERT-Large本地化部署实战&#xff1a;无需联网、不传数据、隐私安全的语义匹配解决方案 你是不是经常需要判断两句话是不是一个意思&#xff1f;比如&#xff0c;检查用户提交的答案是否和标准答案一致&#xff0c;或者判断两篇新闻稿是不是在说同一件事。过去&#xf…...

编程新知 2026/3/28 5:24:03

Qwen3.5-27B-GPTQ-Int4：超高效多模态AI新体验

Qwen3.5-27B-GPTQ-Int4&#xff1a;超高效多模态AI新体验 【免费下载链接】Qwen3.5-27B-GPTQ-Int4 项目地址: https://ai.gitcode.com/hf_mirrors/Qwen/Qwen3.5-27B-GPTQ-Int4 导语 阿里云推出Qwen3.5-27B-GPTQ-Int4模型&#xff0c;通过4位量化技术实现性能与效率的双…...

编程新知 2026/3/28 4:48:05

嵌入式系统开发中的关键技术术语解析

嵌入式系统开发中的56个关键技术术语解析1. 数据转换基础概念1.1 采样与保持特性采集时间(Tacq)是从释放保持状态到采样电容电压稳定至新输入值的1 LSB范围之内所需的时间。在采样-保持电路中&#xff0c;这个参数直接影响系统的动态性能。孔径延迟(tAD)描述从时钟信号的采样沿…...

编程新知 2026/3/28 4:19:55

CAN总线波特率计算器工具开发指南（Python+PyQt5）

CAN总线波特率计算器工具开发指南&#xff08;PythonPyQt5&#xff09; 在汽车电子工程领域&#xff0c;CAN总线作为车载网络的骨干&#xff0c;其通信质量直接影响整车系统的稳定性。而波特率作为CAN通信的基础参数&#xff0c;其配置精度直接决定了总线能否正常工作。传统的手…...

编程新知 2026/3/28 4:19:55

手把手教你用Swaks和Gophish绕过SPF，搭建自己的邮件钓鱼测试环境（附避坑指南）

企业级邮件安全测试实战&#xff1a;从SPF绕过到钓鱼环境搭建 邮件安全测试已成为企业安全防护体系中不可或缺的一环。据统计&#xff0c;超过90%的网络攻击始于钓鱼邮件&#xff0c;而其中近40%的成功攻击源于SPF配置不当或完全缺失。本文将系统性地介绍如何构建一个完整的邮件…...

编程新知 2026/3/28 4:15:54

Nuitka打包Python脚本为.exe的完整避坑指南（含Selenium解决方案）

Nuitka打包Python脚本为.exe的完整避坑指南&#xff08;含Selenium解决方案&#xff09; 将Python脚本打包成独立的可执行文件是许多开发者面临的常见需求&#xff0c;尤其是当需要分发工具或应用给没有Python环境的用户时。Nuitka作为一款强大的Python编译器&#xff0c;能够将…...

编程新知 2026/3/28 3:45:42

将Autoresearch转化为通用技能

我是一名技术作家。我每天在文档仓库、Markdown 文件、API 参考、风格指南和 SEO 审计中度过。我不训练语言模型。我不写 CUDA 内核。但当 Andrej Karpathy 发布了他的 autoresearch 时&#xff0c;我无法停止思考它。 这个想法太简单了&#xff0c;事后看来似乎很明显&#x…...

编程新知 2026/3/28 2:32:53

STM32实现智能酒驾监测系统设计

基于STM32的酒后驾车监测报警系统设计与实现1. 项目概述1.1 系统背景酒后驾车是全球交通事故的主要诱因之一&#xff0c;传统的人工检测方法存在效率低、覆盖范围有限等问题。随着嵌入式系统和物联网技术的发展&#xff0c;智能化的酒精监测系统成为解决这一问题的有效方案。1.…...

编程新知 2026/3/28 1:17:39

ssm+java2026年毕设私教预约系统【源码+论文】

本系统&#xff08;程序源码&#xff09;带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容一、选题背景关于会议管理问题的研究&#xff0c;现有研究主要以传统纸质登记和简单的OA系统为主&#xff0c;专门针对智能化、全流程会议预…...

编程新知 2026/3/28 1:05:36