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

事件代理 浅谈

news 2026/2/9 12:39:04

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

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

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

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2026/2/8 21:59:25

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2026/1/22 15:14:25

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2026/2/4 4:25:40

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

编程新知 2026/1/31 15:00:15

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/9/27 2:43:26

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

编程新知 2026/1/30 4:58:21

Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

编程新知 2025/11/12 0:06:50

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

编程新知 2026/2/7 21:37:35

spring Security对RBAC及其ABAC的支持使用

RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型&#xff0c;它将权限分配给角色&#xff0c;再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...

编程新知 2026/2/6 14:22:43

Java并发编程实战 Day 11：并发设计模式

【Java并发编程实战 Day 11】并发设计模式 开篇 这是"Java并发编程实战"系列的第11天&#xff0c;今天我们聚焦于并发设计模式。并发设计模式是解决多线程环境下常见问题的经典解决方案&#xff0c;它们不仅提供了优雅的设计思路&#xff0c;还能显著提升系统的性能…...

编程新知 2025/12/10 19:17:05