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

深入理解JS中的事件委托

news 2025/7/8 16:30:27

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

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2025/7/7 3:01:07

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2025/7/6 15:58:45

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2025/7/5 8:54:59

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2025/7/7 22:57:31

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

编程新知 2025/7/6 14:24:18

Linux离线（zip方式）安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

编程新知 2025/6/16 16:58:04

基于Java+MySQL实现（GUI）客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

编程新知 2025/7/7 1:38:57

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

编程新知 2025/6/28 14:04:35

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...

编程新知 2025/7/5 14:21:20

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

编程新知 2025/7/7 23:20:05