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

事件代理 浅谈

news 2026/2/9 23:57:42

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

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

<!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

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2026/2/5 4:39:03

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

编程新知 2025/9/25 5:16:24

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2026/1/20 12:53:30

MFC 抛体运动模拟：常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...

编程新知 2026/1/29 12:12:12

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

编程新知 2026/1/31 6:20:15

HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力：训练时既扩散也回归，但推理时则扩散

前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说&#xff0c;在叠衣服的过程中&#xff0c;我会带着团队对比各种模型、方法、策略&#xff0c;毕竟针对各个场景始终寻找更优的解决方案&#xff0c;是我个人和我司「七月在线」的职责之一 且个人认为&#xff0c…...

编程新知 2026/1/19 6:41:37

Docker拉取MySQL后数据库连接失败的解决方案

在使用Docker部署MySQL时&#xff0c;拉取并启动容器后&#xff0c;有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致&#xff0c;包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因&#xff0c;并提供解决方案。 一、确认MySQL容器的运行状态 …...

编程新知 2026/1/15 21:57:16

spring boot使用HttpServletResponse实现sse后端流式输出消息

1.以前只是看过SSE的相关文章&#xff0c;没有具体实践&#xff0c;这次接入AI大模型使用到了流式输出&#xff0c;涉及到给前端流式返回&#xff0c;所以记录一下。 2.resp要设置为text/event-stream resp.setContentType("text/event-stream"); resp.setCharacter…...

编程新知 2026/2/5 2:55:19

【仿生机器人】刀剑神域——爱丽丝苏醒计划，需求文档

仿生机器人"爱丽丝"系统架构设计需求文档 一、硬件基础 已完成头部和颈部硬件搭建 25个舵机驱动表情系统 颈部旋转功能 眼部摄像头&#xff08;视觉输入&#xff09; 麦克风阵列&#xff08;听觉输入&#xff09; 颈部发声装置&#xff08;语音输出&#xff09…...

编程新知 2025/11/24 1:17:34