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

深入理解JS中的事件委托

news 2026/3/30 3:04:02

JavaScript中的事件委托是一种非常有用的事件处理模式，它允许我们利用事件模型的事件冒泡阶段来减少事件处理器的数量，提高网页性能。本文将介绍事件委托的概念、工作原理、优点以及如何在实际项目中应用事件委托。

1、事件模型

事件模型指在Web开发中，处理和管理事件（如用户输入、系统生成的事件等）的机制和流程。在JavaScript中，事件模型非常关键，因为它定义了事件如何创建、传播和被监听器捕获的规则

1.1、事件

在浏览器中，web事件是由 DOM 元素产生的资源，监听事件来实现JS和HTML交互的载体。web事件被定义成了浏览器内置的API。

1.2、事件模型

JavaScript的事件模型包括三个重要的阶段：事件捕获阶段、目标阶段和事件冒泡。这三个阶段也是事件触发的三个阶段：

  1. 事件捕获阶段：指从最外层的元素开始捕获事件，然后逐级向下传递到最具体的元素。这个过程是从DOM树的根节点开始的，逐级向下直到事件的目标元素。事件捕获的目的是在事件到达目标元素之前就能够捕获到它;
  2. 目标阶段：事件到达目标元素本身，触发目标元素上的事件处理程序;
  3. 事件冒泡阶段：事件冒泡正好与事件捕获相反，事件冒泡是指事件从最具体的元素开始发生，然后逐级向上传播到较为不具体的元素（通常是直到文档的根元素）。大多数事件（如点击事件）都会冒泡，这意味着事件不仅仅在其直接绑定的元素上触发，还会在其父元素、祖父元素等上触发。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title

相关文章：

深入理解JS中的事件委托

JavaScript中的事件委托是一种非常有用的事件处理模式，它允许我们利用事件模型的事件冒泡阶段来减少事件处理器的数量，提高网页性能。本文将介绍事件委托的概念、工作原理、优点以及如何在实际项目中应用事件委托。 1、事件模型 事件模型指在Web开发中，处理和管理事件（如…...

编程日记 2024/7/18 17:11:55

Camera Raw：首选项

Camera Raw 首选项 Preferences提供了丰富的配置选项&#xff0c;通过合理设置&#xff0c;可以显著提升图像处理的效率和效果。根据个人需求调整这些选项&#xff0c;有助于创建理想的工作环境和输出质量。 ◆ ◆ ◆ 打开 Camera Raw 首选项 方法一&#xff1a;在 Adobe Bri…...

编程日记 2024/7/18 17:09:53

HLS加密技术：保障流媒体内容安全的利器

随着网络视频内容的爆炸性增长&#xff0c;如何有效保护视频内容的版权和安全成为了一个亟待解决的问题。HLS&#xff08;HTTP Live Streaming&#xff09;加密技术作为一种先进的流媒体加密手段&#xff0c;凭借其高效性和安全性&#xff0c;在直播、点播等场景中得到了广泛应…...

编程日记 2024/7/18 17:06:50

捷配总结的SMT工厂安全防静电规则

SMT工厂须熟记的安全防静电规则&#xff01; 安全对于我们非常重要&#xff0c;特别是我们这种SMT加工厂&#xff0c;通常我们所讲的安全是指人身安全。 但这里我们须树立一个较为全面的安全常识就是在强调人身安全的同时亦必须注意设备、产品的安全。 电气&#xff1a; 怎样预…...

编程日记 2024/7/18 17:03:47

UE4-初见虚幻引擎

一.创建自己的工程 1.启动 a.通过桌面双击图标来打开对应版本的虚幻引擎 b.通过EPIC启动器开启动虚幻引擎 2.选择或新建项目 ps:高版本虚幻编辑器可以打开低版本的虚幻项目&#xff0c;但是高版本虚幻的项目不可以由低版本的虚幻编辑器打开。 3. 选择要打开的项目 4.选择模版 选…...

编程日记 2024/7/18 17:01:45

基于Vue CLI 3构建Vue3项目（Vue2也可参考）

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…...

编程日记 2024/7/18 17:00:43

Midjourney 绘画提示词汇总：让你的 AI 绘画与众不同

在 AI 技术迅速发展的今天&#xff0c;AI 绘画已经成为了创意工作中的一大利器。Midjourney 作为其中的佼佼者&#xff0c;以其强大的绘画能力和高质量的输出受到了广大用户的喜爱。为了帮助你充分发挥 Midjourney 的潜力&#xff0c;我们整理了一些能够让 AI 绘画与众不同的提…...

编程日记 2024/7/18 16:59:42

React和Vue.js的相似性和差异性是什么？

React 和 Vue.js 都是流行的前端 JavaScript 框架&#xff0c;它们有一些相似性和差异性&#xff1a; 相似性&#xff1a; 组件化&#xff1a;React 和 Vue.js 都支持组件化开发&#xff0c;允许开发者将界面拆分为独立的组件&#xff0c;提高代码的复用性和可维护性。…...

编程日记 2024/7/18 16:58:41

Nginx 和 PHP（特别是使用 Swoole 扩展）的配置和调优

针对千万级用户的高并发应用&#xff0c;Nginx 和 PHP&#xff08;特别是使用 Swoole 扩展&#xff09;的配置和调优是至关重要的。 以下是详细的配置和调优建议&#xff1a; Nginx 配置和调优 工作进程数&#xff08;worker_processes&#xff09;&#xff1a; 根据 CPU 核心…...

编程日记 2024/7/18 16:56:38

Kafka Producer发送消息流程之消息异步发送和同步发送

文章目录 1. 异步发送2. 同步发送 1. 异步发送 Kafka默认就是异步发送&#xff0c;在Main线程中的多条消息&#xff0c;没有严格的先后顺序&#xff0c;Sender发送后就继续下一条&#xff0c;异步接受结果。 public class KafkaProducerCallbackTest {public static void mai…...

编程日记 2024/7/18 16:49:30

Flutter 状态管理调研总结

一, 候选状态管理组件简介 0. flutter_hooks 一个 React 钩子在 Flutter 上的实现&#xff1a;Making Sense of React Hooks 钩子是一种用来管理 Widget 生命周期的新对象&#xff0c;以减少重复代码、增加组件间复用性&#xff0c;允许将视图逻辑提取到通用的用例中并重用&…...

编程日记 2024/7/18 16:48:28

入门C语言只需一个星期（星期二）

点击上方"蓝字"关注我们 01、算术运算符 int myNum = 100 + 50;int sum1 = 100 + 50; // 150 (100 + 50)int sum2 = sum1 + 250; // 400 (150 + 250)int sum3 = sum2 + sum2; // 800 (400 + 400) + 加 将两个值相加 x + y - 减 从另一个值中减去一个值 …...

编程日记 2024/7/18 16:46:25

切换node版本

一、在Linux上切换Node.js版本有多种实现方法&#xff1a; 1.使用nvm&#xff08;Node Version Manager&#xff09;&#xff1a; 安装nvm&#xff1a;可以通过curl或wget来安装nvm&#xff0c;具体请参考nvm的官方文档。 安装不同版本的Node.js&#xff1a;使用nvm可以轻松…...

编程日记 2024/7/18 16:45:24

【常见开源库的二次开发】基于openssl的加密与解密——Base的编解码（二进制转ascll）（二）

目录&#xff1a; 目录&#xff1a; 一、 Base64概述和应用场景 1.1 概述 1.2 应用场景 二、Base16 2.1 Base16编码 2.2 Base16编解码 三、Base64 四、OpenSSL BIO接☐ 4.1 Filter BIOs&#xff1a; 4.2 Source/Sink BIOs&#xff1a; 4.3 应用场景&#xff1a; 4.4 具体使用&…...

编程日记 2024/7/18 16:38:15

ssrf复习（及ctfshow351-360）

1. SSRF 概述 服务器会根据用户提交的URL发送一个HTTP请求。使用用户指定的URL&#xff0c;Web应用可以获取图片或者文件资源等。典型的例子是百度识图功能。 如果没有对用户提交URL和远端服务器所返回的信息做合适的验证或过滤&#xff0c;就有可能存在“请求伪造"的缺陷…...

编程日记 2024/7/18 16:37:13

请求通过Spring Cloud Gateway 503

最近想处理一个通用的网关服务。 但是我在处理好所有配置的时候发现&#xff0c;网络请求过网关的时候&#xff0c;一直503&#xff0c;我所有的配置都没问题。 环境&#xff1a; JDK&#xff1a; 17 Spring Cloud: 2023.0.2 在 Spring Cloud Gateway 的早期版本中&#xff…...

编程日记 2024/7/18 16:36:12

C++代码_让室友坑我

引子 今天古文波在外地上C集训营&#xff0c;结果却被一起学习的室友坑了。啊&#xff0c;好气&#xff0c;我要报复室友。 所以&#xff0c;我写出了死亡代码。 如果你也想报复某些人&#xff0c;可以看下去。 代码构造&#xff1a; 头文件 想要使用一些函数&#xff0c;如…...

编程日记 2024/7/18 16:35:11

AG32 的MCU与FPGA的主频可以达到568MHz吗

Customers: AG32/ AGRV2K 这个芯片主频和定时器最高速度是多少&#xff1f;用户期望 CPLD计时器功能0.1ns以下。 AGM RE: CPLD做不到 0.1ns的速率&#xff0c;这个需要10G以上的时钟。 那AGRV2K最高多少MHz呢&#xff1f; 一般200MHZ比较容易实现。 进一步说明&#xff1…...

编程日记 2024/7/18 16:33:09

怎样减少视频的容量 怎样减少视频内存保持清晰度

在数字媒体时代&#xff0c;视频内容已经成为人们日常交流和信息传递的重要方式。然而&#xff0c;视频往往占用大量存储空间&#xff0c;给我们的设备带来不小的负担。如何在不损失视频质量的前提下&#xff0c;减少视频文件的大小呢&#xff1f;本文将为你揭秘几个实用的技巧…...

编程日记 2024/7/18 16:32:08

谈一谈一条SQL的查询、更新语句究竟是如何执行的?

文章目录 理解执行流程衍生知识redo logbinlog 本篇文章是基于《MySQL45讲》来写的个人理解与感悟。 理解 先看下图&#xff1a; 上一篇文章我们讨论了一条SQL查询语句的执行流程&#xff0c;并介绍了执行过程中涉及的处理模块。 回顾一下&#xff1a; 大体来说&#xff0c;…...

编程日记 2024/7/18 16:22:59

轻量级免安装跨设备：浏览器插件如何重塑微信使用体验

轻量级免安装跨设备&#xff1a;浏览器插件如何重塑微信使用体验 【免费下载链接】wechat-need-web 让微信网页版可用 / Allow the use of WeChat via webpage access 项目地址: https://gitcode.com/gh_mirrors/we/wechat-need-web 在数字化办公日益普及的今天&#xf…...

编程新知 2026/3/30 2:30:34

Landsat 9 数据预处理第一步：在ENVI里正确加载影像的保姆级指南（含MTL文件处理）

Landsat 9数据预处理全流程&#xff1a;从ENVI加载到分析就绪的完整指南 当第一次拿到Landsat 9数据时&#xff0c;很多遥感新手会卡在最基础的数据加载环节。这就像拿到一把高级门锁的钥匙&#xff0c;却因为不知道正确的插入角度而无法开启后续分析的大门。本文将带你系统掌…...

编程新知 2026/3/30 2:02:27

uConfigLib：嵌入式轻量级类型安全配置注册表

1. uConfigLib 库深度解析&#xff1a;面向嵌入式系统的轻量级配置注册表实现1.1 设计目标与工程定位uConfigLib 是一个专为资源受限嵌入式平台设计的纯 C 语言配置管理库&#xff0c;其核心目标并非提供通用键值存储&#xff0c;而是构建一种类 Windows 注册表&#xff08;Reg…...

编程新知 2026/3/30 1:28:03

FreeRTOS实战：基于串口空闲中断与二值信号量构建高效数据接收框架

1. 串口通信的痛点与解决方案 在嵌入式开发中&#xff0c;串口通信是最基础也最常用的外设之一。但处理不定长数据时&#xff0c;很多开发者会遇到这样的困扰&#xff1a;要么频繁进入接收中断导致CPU负载过高&#xff0c;要么需要手动设置数据包长度增加协议复杂度。我在早期项…...

编程新知 2026/3/30 0:43:44

嵌入式系统错误处理机制与实现

嵌入式系统中的错误处理机制深度解析1. 错误概念与分类1.1 错误分类体系在嵌入式系统开发中&#xff0c;错误处理是确保系统可靠性的关键环节。从严重性维度分析&#xff0c;程序错误可分为两类&#xff1a;致命性错误&#xff1a;系统无法执行恢复操作&#xff0c;典型处理方式…...

编程新知 2026/3/30 0:17:34

暗黑3终极按键助手：5分钟学会解放双手的完整指南

暗黑3终极按键助手&#xff1a;5分钟学会解放双手的完整指南 【免费下载链接】D3keyHelper D3KeyHelper是一个有图形界面&#xff0c;可自定义配置的暗黑3鼠标宏工具。 项目地址: https://gitcode.com/gh_mirrors/d3/D3keyHelper 还在为暗黑破坏神3中繁琐的按键操作而烦…...

编程新知 2026/3/29 23:41:19

告别AP离线！深入浅出解析神州数码AC/AP注册机制：二层发现 vs. DHCP Option 43实战选型

神州数码无线网络部署实战&#xff1a;AC与AP注册机制深度解析 在企业无线网络部署中&#xff0c;AC&#xff08;无线控制器&#xff09;与AP&#xff08;无线接入点&#xff09;的注册机制是构建稳定无线网络的基础环节。神州数码作为国内领先的网络设备提供商&#xff0c;其A…...

编程新知 2026/3/29 23:01:06

SurfaceView视觉优化实战：圆角与渐变蒙层的完美结合

1. SurfaceView视觉优化的核心价值 在Android开发中&#xff0c;SurfaceView因其独特的双缓冲机制和独立的绘图线程&#xff0c;成为视频播放、游戏渲染等高性能场景的首选组件。但原生SurfaceView的直角边框和单调的呈现方式&#xff0c;常常与现代化UI设计语言格格不入。我在…...

编程新知 2026/3/29 22:49:00

告别数据洪流：手把手教你用ZCANPRO的视图筛选与实时曲线功能高效分析CAN报文

告别数据洪流&#xff1a;手把手教你用ZCANPRO的视图筛选与实时曲线功能高效分析CAN报文 在车载电子和嵌入式开发领域&#xff0c;CAN总线数据的分析工作常常让工程师们头疼不已。想象一下&#xff0c;当你的测试设备捕获到成千上万条CAN报文时&#xff0c;如何从中快速定位到关…...

编程新知 2026/3/29 22:00:39

从SUB、PUSH到栈操作：5条指令带你吃透微程序控制器设计核心

从SUB、PUSH到栈操作&#xff1a;5条指令带你吃透微程序控制器设计核心 在计算机组成原理的探索中&#xff0c;微程序控制器设计一直是连接硬件与软件的桥梁。不同于直接通过硬连线控制&#xff0c;微程序控制采用"存储逻辑"的思想&#xff0c;将每条机器指令的执行分…...

编程新知 2026/3/29 21:32:24