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

事件代理 浅谈

news 2025/10/28 14:49:45

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

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

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

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/10/25 17:23:41

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2025/10/26 18:53:34

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2025/10/23 17:46:23

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

编程新知 2025/10/24 18:24:29

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2025/10/24 9:31:39

基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

编程新知 2025/10/4 20:58:43

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2025/10/25 16:51:56

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/9/30 16:23:57

Go 并发编程基础：通道（Channel）的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

编程新知 2025/8/28 22:40:10

【JVM】Java虚拟机（二）——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...

编程新知 2025/10/27 13:40:32