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

JavaScript 事件流与事件委托

news 来源：原创 2025/7/3 9:37:34

一、事件流、事件捕获与事件冒泡

1. 事件流（Event Flow）

2. 事件捕获（Event Capturing）

3. 事件冒泡（Event Bubbling）

4. 阻止事件冒泡

5. 事件解绑

6. 实际应用场景

二、事件委托

1. 什么是事件委托？

2. 为什么需要事件委托？

3. 事件委托的实现原理

4. 事件委托的代码示例

5. 处理复杂子元素结构

6. 事件委托的适用场景

7. 事件委托的局限性

8. 最佳实践

示例：Tab栏切换

一、事件流、事件捕获与事件冒泡

1. 事件流（Event Flow）

事件流描述了事件从触发到处理的完整传播过程，分为三个阶段：

捕获阶段（Capture Phase）
- 事件从 window 开始，逐级向下传递到目标元素的父级。
- 默认情况下，事件监听器不会在此阶段触发（需显式配置捕获监听）。
目标阶段（Target Phase）
- 事件到达目标元素（触发事件的元素）。
- 无论是否配置捕获监听，目标元素的事件监听器都会触发。
冒泡阶段（Bubble Phase）
- 事件从目标元素逐级向上冒泡回 window。
- 大多数事件默认在冒泡阶段触发监听器（如 click、keydown）。

如果事件是在冒泡阶段执行的，我们称为冒泡模式，它会先执行子盒子事件再去执行父盒子事件，默认是冒泡模式。
如果事件是在捕获阶段执行的，我们称为捕获模式，它会先执行父盒子事件再去执行子盒子事件。

2. 事件捕获（Event Capturing）

在捕获阶段触发事件监听器，需通过 addEventListener 的第三个参数配置：

// 语法：addEventListener(type, handler, useCapture)
parent.addEventListener('click', handler, true); // 捕获阶段触发

示例：捕获阶段监听

<div class="parent"><div class="child"></div>
</div>

const parent = document.querySelector('.parent');
const child = document.querySelector('.child');// 父元素捕获阶段监听
parent.addEventListener('click', () => {console.log('捕获阶段：父元素被触发');
}, true);// 子元素冒泡阶段监听（默认）
child.addEventListener('click', () => {console.log('冒泡阶段：子元素被触发');
});// 点击子元素时的输出顺序：
// 1. 捕获阶段：父元素被触发
// 2. 冒泡阶段：子元素被触发

3. 事件冒泡（Event Bubbling）

事件从目标元素向上冒泡到根元素，默认行为适用于大多数事件：

child.addEventListener('click', () => {console.log('子元素被点击');
}); // 默认冒泡阶段触发

示例：冒泡阶段监听

parent.addEventListener('click', () => {console.log('冒泡阶段：父元素被触发');
});// 点击子元素时的输出顺序：
// 1. 子元素被点击
// 2. 冒泡阶段：父元素被触发

4. 阻止事件冒泡

通过 event.stopPropagation() 或 event.stopImmediatePropagation() 控制事件传播：

方法	说明
`event.stopPropagation()`	阻止事件继续传播（后续捕获或冒泡阶段的监听器不再触发）。
`event.stopImmediatePropagation()`	阻止事件传播，并阻止同一元素上的其他监听器执行（优先级更高）。

示例：

child.addEventListener('click', (e) => {console.log('子元素点击');e.stopPropagation(); // 阻止冒泡到父元素
});parent.addEventListener('click', () => {console.log('父元素点击'); // 不会触发
});

5. 事件解绑

使用 removeEventListener 移除事件监听器，需确保参数与添加时一致：

const handler = () => {console.log('点击事件');
};// 添加监听
button.addEventListener('click', handler);// 移除监听（成功）
button.removeEventListener('click', handler);// ❌ 错误示例：使用匿名函数无法解绑
button.addEventListener('click', () => {});
button.removeEventListener('click', () => {}); // 无效

自解绑模式：在回调函数内部移除监听器（适用于一次性事件）

button.addEventListener('click', function handleClick() {console.log('只触发一次');button.removeEventListener('click', handleClick); // 执行后解绑
});

6. 实际应用场景

阻止默认行为与冒泡

link.addEventListener('click', (e) => {e.preventDefault(); // 阻止跳转e.stopPropagation(); // 阻止冒泡
});

事件委托（利用冒泡）

document.querySelector('ul').addEventListener('click', (e) => {if (e.target.tagName === 'LI') {console.log('点击的列表项:', e.target.textContent);}
});

精确控制事件阶段

// 父元素在捕获阶段拦截事件
parent.addEventListener('click', () => {console.log('捕获阶段拦截');
}, true);

二、事件委托

1. 什么是事件委托？

事件委托（Event Delegation） 是一种利用 事件冒泡 机制，将子元素的事件监听器绑定到其父元素（或更高层祖先元素）上的技术。通过这种方式，父元素可以统一处理多个子元素的事件，尤其适用于 动态生成的元素 或 大量同类元素 的场景。

2. 为什么需要事件委托？

减少内存占用：避免为每个子元素单独绑定事件监听器，节省内存。
动态元素支持：新增的子元素无需重新绑定事件，自动继承父元素的事件处理。
代码简洁性：统一管理事件逻辑，减少重复代码。

3. 事件委托的实现原理

事件冒泡
事件从子元素向上冒泡到父元素，父元素通过事件对象（event）的 target 属性识别实际触发事件的子元素。
- event.target：触发事件的具体子元素（最深层元素）。
- event.currentTarget：绑定事件的父元素（等同于 this）。
筛选目标元素
在父元素的事件处理函数中，通过条件判断（如 tagName、class、data-* 属性）过滤需要处理的子元素。

4. 事件委托的代码示例

场景：点击列表项（<li>）时输出其内容。

HTML 结构：

<ul id="list"><li>第一项</li><li>第二项</li><li>第三项</li>
</ul>

传统方式（为每个 <li> 绑定事件）：

const items = document.querySelectorAll('#list li');
items.forEach(item => {item.addEventListener('click', () => {console.log(item.textContent);});
});// 问题：动态新增的 `<li>` 无法自动绑定事件！

事件委托方式（绑定到父元素 <ul>）：

document.querySelector('#list').addEventListener('click', function(event) {// 判断点击的是 `<li>` 元素if (event.target.tagName === 'LI') {console.log('点击项内容:', event.target.textContent);}
});// 动态添加的 `<li>` 自动生效！

5. 处理复杂子元素结构

若子元素内部存在嵌套（如 <li> 包含 <span>），直接使用 event.target 可能指向深层元素。此时需用 closest() 方法向上查找匹配的父元素。

示例：

<ul id="list"><li><span>第一项</span></li><li><span>第二项</span></li>
</ul>

document.querySelector('#list').addEventListener('click', function(event) {// 向上查找最近的 `<li>` 父元素const li = event.target.closest('li');if (li) {console.log('点击项内容:', li.textContent);}
});

6. 事件委托的适用场景

场景	说明
列表或表格交互	点击行、列、按钮时统一处理。
动态内容	新增的按钮、卡片等元素无需重新绑定事件。
高性能需求	减少成百上千个事件监听器的内存占用。
统一逻辑管理	如表单验证、批量操作等。

7. 事件委托的局限性

不冒泡的事件无法委托
- 如 focus、blur、mouseenter、mouseleave 等事件默认不冒泡。
- 替代方案：使用冒泡版本的事件（如 focusin、focusout）。
高频事件需优化性能
- 如 mousemove、scroll，需结合 节流（throttle） 或 防抖（debounce）。
精确判断目标元素
- 需谨慎处理 event.target，避免误判嵌套元素。

8. 最佳实践

明确筛选条件
- 使用 tagName、classList.contains()、dataset 属性等精准匹配目标元素。
```
if (event.target.classList.contains('btn')) { /* ... */ }
```
结合 closest() 处理嵌套
- 确保即使点击子元素，也能找到正确的父元素。
```
const button = event.target.closest('[data-action="delete"]');
```
避免过度委托
- 不宜将全页面事件都委托到 document，应根据业务范围选择最近的父元素。
及时解绑无用事件
- 父元素移除时，需调用 removeEventListener 防止内存泄漏。

示例：Tab栏切换

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>tab栏切换</title><style>* {margin: 0;padding: 0;}.tab {width: 590px;height: 340px;margin: 20px;border: 1px solid #e4e4e4;}.tab-nav {width: 100%;height: 60px;line-height: 60px;display: flex;justify-content: space-between;}.tab-nav h3 {font-size: 24px;font-weight: normal;margin-left: 20px;}.tab-nav ul {list-style: none;display: flex;justify-content: flex-end;}.tab-nav ul li {margin: 0 20px;font-size: 14px;}.tab-nav ul li a {text-decoration: none;border-bottom: 2px solid transparent;color: #333;}.tab-nav ul li a.active {border-color: #e1251b;color: #e1251b;}.tab-content {padding: 0 16px;}.tab-content .item {display: none;}.tab-content .item.active {display: block;}</style>
</head><body><div class="tab"><div class="tab-nav"><h3>每日特价</h3><ul><li><a class="active" href="javascript:;" data-id='0'>精选</a></li><li><a href="javascript:;" data-id='1'>美食</a></li><li><a href="javascript:;" data-id='2'>百货</a></li><li><a href="javascript:;" data-id='3'>个护</a></li><li><a href="javascript:;" data-id='4'>预告</a></li></ul></div><div class="tab-content"><div class="item active"><img src="./images/tab00.png" alt="" /></div><div class="item"><img src="./images/tab01.png" alt="" /></div><div class="item"><img src="./images/tab02.png" alt="" /></div><div class="item"><img src="./images/tab03.png" alt="" /></div><div class="item"><img src="./images/tab04.png" alt="" /></div></div></div><script>//常规做法const lis = document.querySelectorAll('.tab a')for (let i = 0; i < lis.length; i++) {lis[i].addEventListener('mouseenter', function () {if (document.querySelector('.tab-nav .active'))document.querySelector('.tab-nav .active').classList.remove('active')this.classList.add('active')})lis[i].addEventListener('click', function () {if (document.querySelector('.tab-content .active'))document.querySelector('.tab-content .active').classList.remove('active')document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')})}//事件委托// const ul = document.querySelector('.tab-nav ul')// const items = document.querySelectorAll('.tab-content .item')// ul.addEventListener('click', function (e) {//   if (document.querySelector('.tab-nav .active'))//     document.querySelector('.tab-nav .active').classList.remove('active')//   e.target.classList.add('active')//   if (document.querySelector('.tab-content .active'))//     document.querySelector('.tab-content .active').classList.remove('active')//   const i = +e.target.dataset.id//   items[i].classList.add('active')// })</script>
</body></html>

JavaScript 事件流与事件委托

目录一、事件流、事件捕获与事件冒泡 1. 事件流（Event Flow） 2. 事件捕获（Event Capturing） 3. 事件冒泡（Event Bubbling） 4. 阻止事件冒泡 5. 事件解绑 6. 实际应用场景二、事件委托 1. 什么是…...

编程日记 2025/7/3 9:37:34

RAG 优化 Embedding 模型或调整检索策略

在 RAG（Retrieval-Augmented Generation）系统中，优化 Embedding 模型和调整检索策略是提升检索质量的核心手段。以下是系统化的优化方法和实践指南：一、优化 Embedding 模型 Embedding 模型的质量直接决定检索的召回率（Recall）和准确率（Precision）。优化方向包括： …...

编程日记 2025/6/28 5:53:07

Sentinel[超详细讲解]-3

主要讲解🚀 - 基于QPS/并发数的流量控制 1、流控规则流量控制（Flow Control）用于限制某个资源的访问频率，防止系统被瞬时的流量高峰冲垮。流量控制规则可以针对不同的资源进行配置，例如接口、方法、类等。流量规则的…...

编程日记 2025/7/2 23:36:57

vue3使用i18n$t()无法获取数组和对象

今天在使用i18n进行国际化时，定义了数组和对象节点，但是用$t()无法获取，只能返回字符串值，查询相关材料，解决方案如下： 使用新的api替换即可，$t > $tm 参考文章(深表谢意)：vue -…...

编程日记 2025/6/29 2:18:20

机器学习的一百个概念（5）数据增强

前言本文隶属于专栏《机器学习的一百个概念》，该专栏为笔者原创，引用请注明来源，不足和错误之处请在评论区帮忙指出，谢谢！ 本专栏目录结构和参考文献请见[《机器学习的一百个概念》 ima 知识库知识库广场搜索&…...

编程日记 2025/6/29 14:32:26

（Kotlin）Android 高效底部导航方案：基于预定义 Menu 和 ViewPager2 的 Fragment 动态绑定实现

支持预定义 Menu 并绑定 Fragment，同时保留动态添加 Tab 的能力 BottomTabHelper.kt package smartconnection.com.smartconnect.home.utilimport android.content.Context import android.util.SparseArray import androidx.annotation.IdRes import androidx.fra…...

编程日记 2025/7/3 9:29:39

零基础入门多媒体音频（4）-GENIVIProjectAudioManager总览

GENIVI Project的AudioManager是一个专门设计用于汽车信息娱乐系统的音频管理解决方案。它负责管理和控制车辆内的音频源和音频路径，确保各种音频信号能够正确、高效地在车辆的音响系统中传输和播放。 AudioManager的核心功能包括音频源的管理、音频路径的控制以及音…...

编程日记 2025/7/1 13:10:36

DeepSeek协助优化-GTX750Ti文物显卡0.65秒卷完400MB float 音频512阶时域FIR

文章目录 1. 学习目的2. 阶段成果2.1 NVVP 性能探查2.2 测试编译环境2.3 测试样例 3 学习过程3.1 提问DeepSeek3.2 最终代码 4. 体会 1. 学习目的最近在学习cuda，准备给我的taskBus SDR添加CUDA的模块支持，以便可以用PC机压榨山寨 B210那56M的带宽。因…...

编程日记 2025/7/2 21:32:20

Embedding原理

Embedding（嵌入）是将离散符号（如单词）映射到连续向量空间的核心技术，其本质是语义的数学化表示。以下是其核心原理详解： 一、基础概念图解 graph LRA[单词猫] --> B[索引5] --> C[向量[0.2, -1.3,…...

编程日记 2025/6/28 1:26:06

Spark，配置hadoop集群1

配置运行任务的历史服务器 1.配置mapred-site.xml 在hadoop的安装目录下，打开mapred-site.xml，并在该文件里面增加如下两条配置。 eg我的是在hadoop199上  <property><name>mapreduce.jobhistory.address…...

编程日记 2025/6/28 6:20:29

人工智能大模型-数据预处理-文本数据预处理-图像数据预处理

文本数据预处理大模型常用的文本数据类型通用文本数据：网页、对话和图书资料等专用文本数据：多语言文本、科学文本、代码和指令等构造方法指令数据：指令(instruction)、输入(input)、输出(output)3部分组成如果在instruction部分已…...

编程日记 2025/6/28 1:29:53

怎么使用嵌套虚拟环境实现项目部署之virtualenv嵌套conda绕开安装环境检测实现.venv部署facefusion

#工作记录一、前言嵌套虚拟环境本来是不建议的一种方法，这种嵌套虚拟环境的使用有一定特殊性，但在一些特别的使用场景下，嵌套虚拟环境的使用非常有用。二、嵌套虚拟环境： （一）conda嵌套virtualenv 该…...

编程日记 2025/7/3 4:38:53

ansible介绍以及安装

一.ansible介绍实现对IT基础设施的批量管控，加快效率，节省工作时间。 1.ansible特性 1.基于python开发，开源， 2.基于ssh协议工作。只需要确保ansible机器，与被控制机器能连通就好了， 3.no server 无…...

编程日记 2025/6/28 1:24:42

GPT-4o图像生成功能：技术突破与隐忧并存

2025年3月25日，OpenAI正式推出GPT-4o原生图像生成功能，宣称其实现了“文本到图像的终极跨越”。然而，这一被市场追捧的技术在短短72小时内便因用户需求过载触发限流，暴露出算力瓶颈与商业化矛盾的尖锐性。这场技术狂欢的背后&…...

编程日记 2025/6/29 15:00:02

Java 时间处理：轻松掌握 java.time 包

前言在 Java 开发中，日期和时间处理一直是令人头疼的问题。传统的 Date 和 Calendar 类不仅复杂，还充满了线程安全和时区处理的坑。Java 8 引入的 java.time 包彻底改变了这一局面，带来了现代化、直观且功能强大的日期时间 API。本…...

编程日记 2025/6/28 3:00:52

Vue项目中Vuex在util引入，断点存在default

示例代码 // src/store/index.js import Vue from vue; import Vuex from vuex; ……Vue.use(Vuex); export default new Vuex.Store({…… })// src/utils/index.js import store from /store // 导入默认导出的 store export async function getDict() {store.state.userInf…...

编程日记 2025/7/2 23:26:46

2025宁德时代测评Verify考什么？网申测评如何通过SHL笔试｜附真题线上笔试考点、高分攻略、CATL新能源科技SHL测评宁德社招题目、面试攻略、求职建议

——职小豚带你拆解新能源巨头招聘密码一、宁德时代：新能源赛道「超级独角兽」作为全球动力电池龙头，宁德时代（CATL）的江湖地位无需多言： 技术硬实力：麒麟电池、钠离子电池、无钴电池等黑科技加持&…...

编程日记 2025/7/1 12:36:03

谈谈常见的数据结构（如数组、链表、栈、队列、哈希表、树、图）及其应用场景

一、数组（Array） 定义：连续存储相同类型数据的线性结构，支持随机访问。应用场景：列表渲染、数据缓存、算法处理代码示例： // 数组基本操作 const arr [1, 2, 3, 4]; arr.push(5); // O(1) 平均时间复杂…...

编程日记 2025/6/29 5:48:18

【＜二＞丹方改良：Spring 时代的 JavaWeb】之 Spring Boot 中的 AOP：实现日志记录与性能监控

答应我，这篇一定要看到最后~！ <前文回顾> 点击此处查看合集 https://blog.csdn.net/foyodesigner/category_12907601.html?fromshareblogcolumn&sharetypeblogcolumn&sharerId12907601&sharereferPC&sharesourceFoyoDesigner&a…...

编程日记 2025/6/28 7:11:34

【算法】快速幂

一、概念快速幂是一种高效的指数运算，当指数范围过大时，通过位运算能够减少大量的计算次数对于，我们通过将指数b转化为二进制数，就可以将分解为许多的（其中i是指数b中对应位为1的位数） 例如&#xff0…...

编程日记 2025/6/28 1:28:59

使用卷积神经网络识别MNIST数据集

卷积神经网络卷积神经网络本质是共享权重稀疏链接的全连接网络编写步骤构建一个神经网络，步骤是几乎不变的，大概有以下几步准备数据集 #更高级的CNN网络 import torch import torch.nn as nn import torch.nn.functional as F import torchvisi…...

编程日记 2025/6/28 1:24:53

JavaScript 中数组增删改查

在 JavaScript 中，数组是一种用来存储不同类型的值的数据结构。增加数组元素： let arr = [1, 2, 3];// 在数组末尾添加元素 arr.push(4); console.log(arr); // [1, 2, 3, 4]// 在数组开头添加元素 arr.unshift(0); console.log(arr); // [0, 1, 2, 3, 4]// 在指定位置插…...

编程日记 2025/6/28 1:24:50

【Kettle安装】Kettle安装过程, 电脑已安装java23,安装Kettle 出现报错:尝试启动 Java 虚拟机（JVM）时失败解决方法

Kettle安装 Kettle 通常指的是 Pentaho Data Integration (PDI)，这是一款开源的 ETL（Extract, Transform, Load）工具，用于数据集成、数据清洗和数据分析。它的核心工具名为 Spoon，但整个项目常被直接称为 Kettle 数据…...

编程日记 2025/6/29 20:26:09

Spring笔记04-注解注入

1.导入包 <dependency><groupId>org.springframework</groupId><artifactId>spring-beans</artifactId><version>5.2.7.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId>…...

编程日记 2025/7/2 7:39:05

[动规19] 最大子数组和

目录 1. 题意 2. 思路 2.1. 状态表示 2.2. 状态转移方程 2.3. 初始化 2.4. 填表顺序 2.5. 返回值 3. 编码 1. 题意链接: 53. 最大子数组和 - 力扣（LeetCode） 题目给你一个整数数组 nums ，请你找出一个具有最大和的连续子数组&…...

编程日记 2025/7/2 19:13:10

2024年零知识证明(ZK)研究进展

Sumcheck 整个领域正在转向更多地依赖于 Sumcheck Protocol Sumcheck是用于验证多项式承诺的协议，常用于零知识证明（ZKP）中，尤其是在可验证计算和扩展性上。它的主要目的是通过对多项式进行分段检查，从而保证某个多项…...

编程日记 2025/7/3 1:21:57

1. 两数之和

leetcode Hot 100系列文章目录一、核心操作二、外层配合操作三、核心模式代码总结一、核心操作使用map，key作为数值，value作为下标先寻找对应的目标值，如果找到了则直接返回，否则在往map中插入提示：小白个人理…...

编程日记 2025/6/28 1:29:35

【电动汽车再生制动控制技术（万字长文，图文并茂）】

电动汽车再生制动控制系统概述电动汽车再生制动的基本原理是:通过具有可逆作用的电动机/发电机来实现电动汽车动能和电能的转化。在汽车减速或制动时，可逆电机以发电机形式工作，汽车行驶的动能带动发电机将汽车动能转化为电能并储存在储能器(蓄电池或超级电容器)中；在汽车…...

编程日记 2025/6/27 6:13:22

python实现股票数据可视化

最近在做一个涉及到股票数据清洗及预测的项目，项目中需要用到可视化股票数据这一功能，这里我与大家分享一下股票数据可视化的一些基本方法。股票数据获取目前，我已知的使用python来获取股票数据方式有以下三种: 爬虫获取，实现…...

编程日记 2025/6/28 6:41:36

2025年湖南建筑安全员 C1考证刷题题库

湖南建筑安全员 C1 类的练习题： 1、塔机的拆装作业必须在白天进行，不得在（ ）情况下进行。 A. 夜间 B. 大风 C. 浓雾 D. 以上都是答案：D 2、采用钢筋混凝土灌注桩时，开挖标准是桩身混凝土达到&#…...

编程日记 2025/7/2 11:30:53

【Feign】⭐️使用 openFeign 时传递 MultipartFile 类型的参数参考

💥💥✈️✈️欢迎阅读本文章❤️❤️💥💥 🏆本篇文章阅读大约耗时三分钟。 ⛳️motto：不积跬步、无以千里 📋📋📋本文目录如下：🎁🎁&a…...

编程日记 2025/6/28 1:24:59

ToolsSet之：梯度色板

ToolsSet是微软商店中的一款包含数十种实用工具数百种细分功能的工具集合应用，应用基本功能介绍可以查看以下文章： Windows应用ToolsSet介绍https://blog.csdn.net/BinField/article/details/145898264 ToolsSet中Media菜单下的“Gradient Palette”工…...

编程日记 2025/6/29 5:50:34

Apache Hive和Snowflake的`CREATE VIEW`语法和功能特性整理的对比表

写一个Apache Hive中CREATE VIEW语句转换为对应Snowflake中CREATE VIEW语句的程序，现在需要一个根据功能的相似性对应的Apache HiveQL和Snowflake SQL的CREATE VIEW语句的表。以下是基于Apache Hive的CREATE VIEW语法规则构造的所有可能合法语句实例及其功能说明&…...

编程日记 2025/6/28 1:31:27

【测试】每日3道面试题 3/31

长期更新，建议关注收藏点赞。单元测试策略有哪些，主要内容。白盒测试黑盒测试基于异常和边界的测试主要内容：测试用例设计、执行、结果分析、自动化beta测试和alpha测试主要区别主要区别：测试环境测试者 alphabeta时间先后测…...

编程日记 2025/6/28 5:13:26

用 Hugging Face Spaces 打造哪吒的 3D 模型：完整指南

引言： 哪吒，这位中国神话中的传奇人物，以其独特的形象和故事深受人们喜爱。如今，通过 Hugging Face Spaces 提供的 TripoSG 工具，我们可以轻松创建哪吒的 3D 模型。以下是详细步骤，帮助你将这个神话角色带入…...

编程日记 2025/7/2 3:59:54

鸿蒙应用元服务开发-Account Kit概述

Account Kit（华为账号服务）提供简单、快速、安全的登录功能，让用户快捷地使用华为账号登录元服务。用户授权后，Account Kit可提供头像、手机号码等信息，帮助元服务更了解用户。Account Kit提供的SampleCode示例工程体现…...

编程日记 2025/7/2 4:24:10

美团小程序 mtgsig1.2 拼好饭案例分析 mtgsig

声明本文章中所有内容仅供学习交流使用，不用于其他任何目的，抓包内容、敏感网址、数据接口等均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关！ 逆向分析美团网页、小程序、app全是指…...

编程日记 2025/6/28 5:10:18

hadoop集群和常用命令

Hadoop集群的搭建与管理 1. HADOOP简介 Hadoop 是一种用于大规模数据处理的大数据框架，支持通过简单编程模型实现跨计算机集群的数据分布存储和计算3。 2. HADOOP集群部署过程 (1) 解压并安装HADOOP 在虚拟机环境中，可以通过解压缩方式完成Hadoop的安…...

编程日记 2025/7/2 19:12:07

爬虫：基本流程和robots协议

基本流程： 1.确认目标：url:www.baidu.com 2.发送请求：发送网络请求，获取到特定的服务端给你的响应 3.提取数据：从响应中提取特定的数据 4.保存数据：本地(html,json,txt)，数据库获取到的响应…...

编程日记 2025/6/28 5:19:01

python之三种去重方法

1. 数据读取与参数解析代码片段 detail pd.read_csv(detail.csv, index_col0, encodinggbk)数据实例参数详解 index_col0： 作用：将第1列设置为索引其他选项： None：不指定索引列（默认）列序号/列名&…...

编程日记 2025/6/28 5:25:43

QML输入控件: TextField（文本框）的样式定制

目录引言示例简介示例代码与关键点示例1：基础样式定制示例2：添加图标示例3：交互式元素（清除按钮） 实现要点总结完整工程下载引言在Qt Quick应用程序开发中，文本输入是最常见的用户交互方式之一。TextFi…...

编程日记 2025/6/28 2:24:29

Visual Studio | 性能探测器

文章目录一、性能探测器1、核心功能2、数据采集3、数据分析3.1、CPU分析前言： Visual Studio（VS）提供的性能探测器（Performance Profiler）是一款强大的工具，它能够帮助开发者分析应用程序的性能&#xff…...

编程日记 2025/7/3 4:13:02

数据库中的函数：高效操作与灵活运用

数据库中的函数：高效操作与灵活运用在数据库开发过程中，函数是常用的工具，可以帮助我们更高效地处理和操作数据。无论是对字符串、数值、日期还是流程控制，数据库函数都能够提供强大的支持。本文将深入探讨常见的数据库函数&…...

编程日记 2025/6/28 1:30:04

《非暴力沟通》第十二章 “重获生活的热情” 总结

《非暴力沟通》第十二章 “重获生活的热情” 的核心总结： 本章将非暴力沟通的核心理念延伸至生命意义的探索，提出通过觉察与满足内心深处的需要，打破“义务性生存”的桎梏，让生活回归由衷的喜悦与创造。作者强调，当行动…...

编程日记 2025/7/2 1:36:13

C++位运算精要：高效解题的利器

引言在算法竞赛和底层开发中，位运算（Bit Manipulation）因其极高的执行效率而广受青睐。它能在O(1)时间复杂度内完成某些复杂操作，大幅优化程序性能。本文系统梳理C位运算的核心技巧，涵盖基础操作、经典应用、优化策略…...

编程日记 2025/7/3 1:11:53

从两种遍历方法中构造二叉树

从前序与中序遍历序列构造二叉树题目描述代码实现 class Solution { private:unordered_map<int, int> mapIn;TreeNode* dfs(vector<int>& preorder, vector<int>& inorder, int pre_left, int pre_right, int in_left, int in_right){//出口if(…...

编程日记 2025/7/2 23:24:29

【C语言】字符函数的易错点及其模拟实现

在上一章为大家简单介绍了字符函数的种类和基础运用，语法。那么在本章为大家分享一些易错点和自己如何编写一个自定义函数来实现相同的作用。（点个关注呗） 一strlen：计算字符串长度 1. 函数原型 size_t strlen(const char *str…...

编程日记 2025/6/28 1:25:00

【前端】创建一个vue3+JavaScript项目流程

1、检查node和npm是否安装，查看版本： node -v npm -v 2、安装脚手架cli或vite （1）cli 安装：npm install -g vue/cli 检查是否安装成功：vue -v 使用cli创建项目：vue create my-project(项目名)--…...

编程日记 2025/6/29 13:50:17

JVM面试专题

目录 1 JVM组成 1.1 JVM由那些部分组成，运行流程是什么？ 1.2 什么是程序计数器？ 1.3 你能给我详细的介绍Java堆吗? 元空间(MetaSpace)介绍 1.4 什么是虚拟机栈 1.5 方法区 1.5.1 概述 1.5.2 常量池 1.5.3 运行时常量池 1.6 你听过…...

编程日记 2025/6/30 8:21:44

齐次线性方程组及python求解

齐次线性方程组的概念齐次线性方程组是指所有常数项都为零的线性方程组，其一般形式为： a 11 x 1 a 12 x 2 ⋯ a 1 n x n 0 a_{11}x_1 a_{12}x_2 \cdots a_{1n}x_n 0 a11x1a12x2⋯a1nxn0 a 21 x 1 a 22 x 2 ⋯ a 2 n x n 0 a_…...

编程日记 2025/7/1 18:14:52

一、事件流、事件捕获与事件冒泡

1. 事件流（Event Flow）

2. 事件捕获（Event Capturing）

3. 事件冒泡（Event Bubbling）

4. 阻止事件冒泡

5. 事件解绑

6. 实际应用场景

二、事件委托

1. 什么是事件委托？

2. 为什么需要事件委托？

3. 事件委托的实现原理

4. 事件委托的代码示例

5. 处理复杂子元素结构

6. 事件委托的适用场景

7. 事件委托的局限性

8. 最佳实践

示例：Tab栏切换

相关文章：