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

事件代理 浅谈

news 2026/1/28 9:28:33

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

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

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

＜6＞-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

编程新知 2025/12/11 18:28:17

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

编程新知 2026/1/27 5:01:54

关于 WASM：1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

编程新知 2025/11/19 10:53:07

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

编程新知 2026/1/15 5:17:33

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2026/1/26 21:03:35

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2026/1/28 5:55:15

html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

编程新知 2026/1/27 20:34:19

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

编程新知 2026/1/23 10:28:48

AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

编程新知 2026/1/26 12:50:00

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

编程新知 2026/1/25 11:43:20