深入理解JS中的事件委托

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/379045.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

分布式对象存储minio

本教程minio 版本&#xff1a;RELEASE.2021-07-*及以上 1. 分布式文件系统应用场景 互联网海量非结构化数据的存储需求 电商网站&#xff1a;海量商品图片视频网站&#xff1a;海量视频文件网盘 : 海量文件社交网站&#xff1a;海量图片 1.1 Minio介绍 MinIO 是一个基于Ap…

通用图形处理器设计GPGPU基础与架构(二)

一、前言 本系列旨在介绍通用图形处理器设计GPGPU的基础与架构&#xff0c;因此在介绍GPGPU具体架构之前&#xff0c;需要了解GPGPU的编程模型&#xff0c;了解软件层面是怎么做到并行的&#xff0c;硬件层面又要怎么配合软件&#xff0c;乃至定出合适的架构来实现软硬件协同。…

最新版智能修图-中文luminar ai 1.55(13797) 和 neo1.20,支持m芯片和intel芯片(绝对可用)

一。Luminar AI for macOS 完整版本 这个程序是第一个完全由人工智能驱动的图像编辑器。有了它&#xff0c;创建引人注目的照片是有趣的&#xff0c;令人惊讶的容易。它是一个独立的照片编辑器和macOS插件。 1.1 Luminar AI for macOS 轻轻地塑造和完善一个肖像打造富有表现…

如何使用 GraalVM 减少与 Kafka 集成测试中的内存消耗

在本文中&#xff0c;我想分享我使用 GraalVM 为 EmbeddedKafka 创建本机映像的经验。在集成测试中使用此映像不仅可以加快测试场景的执行速度&#xff0c;还可以减少内存消耗。有趣的是&#xff0c;与在 Testcontainers 中使用 confluentinc/cp-kafka 相比&#xff0c;在速度和…

VRRP虚拟路由冗余技术

VRRP虚拟路由冗余技术&#xff1a;是一种路由容错协议&#xff0c;用于在网络中提供路由器的冗余备份。它通过将多个路由器虚拟成一个虚拟路由器并且多个路由器之间共享一个虚拟IP地址来实现冗余和高可用性。当承担转发业务的主路由器出现故障时&#xff0c;其他备份路由器可以…

uniapp 微信默认地图选点功能实现

效果图 配置项 微信公众平台-小程序配置 uniapp配置 上代码 <template><view class"content"><button click"toMap">请选择位置</button></view> </template><script setup lang"ts">function toMa…

C# 各版本语法新功能汇总

C# 8.0 以后 官网 C# 7.3 》》in C# 7.2 》》 命名参数、具名参数 》》》 条件 ref 表达式 C# 7.1 》》 default 运算符 default 在C#7.1中得到了改进&#xff0c;不再需要default&#xff08;T&#xff09;了 //变量赋值C#7.0 var s "字符串"; s default(s…

使用llama.cpp量化模型

文章目录 概要整体实验流程技术细节小结 概要 大模型量化是指在保持模型性能尽可能不变的情况下&#xff0c;通过减少模型参数的位数来降低模型的计算和存储成本。本次实验环境为魔搭社区提供的免费GPU环境&#xff08;24G&#xff09;&#xff0c;使用Llama.cpp进行4bit量化可…

前端书籍翻页效果

目录 前端书籍翻页效果前言代码示例创建模板页面css样式编写js代码 结论 前端书籍翻页效果 前端实现翻书效果&#xff0c;附带vue源码 源码下载地址 前言 实际业务开发中&#xff0c;有时候会遇到需要在前端页面内实现翻书效果的需求&#xff0c;本篇文章就为大家介绍如何使…

N Puzzle (数字推盘游戏)

N Puzzle [数字推盘游戏] 1. 15 Puzzle2. N PuzzleReferences puzzle /ˈpʌzl/&#xff1a;n. 谜&#xff0c;智力游戏&#xff0c;疑问&#xff0c;不解之谜&#xff0c;令人费解的事 vt. 迷惑&#xff0c;使困惑1. 15 Puzzle https://en.wikipedia.org/wiki/15_puzzle The…

C#开发:Git的安装和使用

一、安装git 二、如何克隆代码&#xff1f; 1.找到某个本地目录&#xff0c;右键-gitbash 2. 输入以下命令&#xff08;红色是地址&#xff0c;在gitlab获取或联系管理员获取&#xff0c;下图为复制地址的方式&#xff09;&#xff1a; git clone http://xxxxxxxxx.git 输入帐…

MySQL双主双从实现方式

双主双从&#xff08;MM-SS&#xff09; 前言 避免单一主服务器宕机&#xff0c;集群写入能力缺失 从 1 复制 主1 &#xff0c;从 2 复制 主 2 主 1 复制 主 2&#xff0c;主 2 复制主 1 也就是 主 1 和主 2 互为主从。主1主2互为主从&#xff0c; 是为了以下情景&#xff0c…

C#字符串基本操作

1、代码 //1、创建字符串&#xff08;获取长度&#xff09;string str "Hello, World!";Console.WriteLine($"string:{str},length:{str.Length}");//2、字符串连接string str1 "Hello, ";string str2 "World!";Console.WriteLine…

datahub安装部署

作者&#xff1a;恩慈 背景&#xff1a;由于某客户需要建立sparksql的血缘关系&#xff0c;于是提出了datahub&#xff0c;由于网上关于datahub资料较少&#xff0c;因此这里做以记录。 datahub作为一个元数据管理平台&#xff0c;可以对数据资产进行有效的组织&#xff0c;还…

HarmonyOS 开发者联盟高级认证最新题库

本篇文章包含 Next 版本更新后高级认证题库中95%的题目。 答案正确率 50-60%&#xff0c;答案仅做参考。 请在考试前重点看一遍题目&#xff0c;勿要盲目抄答案。 欢迎在评论留言正确答案和未整理的题目。 1、下面关于方舟字节码格式PREF_IMM16_v8_v8描述正确的是 16位前缀操作…

中间件的理解

内容来源于学习网站整理。【一看就会】什么是前端开发的中间件&#xff1f;_哔哩哔哩_bilibili 每日八股文~白话说mq&#xff0c;消息中间件_哔哩哔哩_bilibili 例如&#xff1a; 1&#xff09;两个人打电话&#xff0c;中间的通信网络就是中间件。 2&#xff09;菜鸟驿站&…

Java.Net.UnknownHostException:揭开网络迷雾,解锁异常处理秘籍

在Java编程的浩瀚宇宙中&#xff0c;java.net.UnknownHostException犹如一朵不时飘过的乌云&#xff0c;让开发者在追求网络畅通无阻的道路上遭遇小挫。但别担心&#xff0c;今天我们就来一场说走就走的探险&#xff0c;揭秘这个异常的真面目&#xff0c;并手把手教你几招应对之…

巧用通义灵码助力护网面试

前言 前几年护网还算是一个比较敏感的话题&#xff0c;但是随着近段时间的常态化开始&#xff0c;护网行动也是逐渐走进了大众的视野&#xff0c;成为了社会各界共同关注的安全盛事。本篇也是受通义灵码备战求职季活动的启发&#xff0c;结合近期要开始的护网行动&#xff0c…

每日一题,力扣leetcode Hot100之128. 最长连续序列

题目理解&#xff1a; 从示例1可以看出简单的连续数字就算&#xff0c;从示例2可以看出当有重复数字时&#xff0c;是不算长度的 解法一&#xff1a; 第一个想到的解法&#xff0c;就是对nums排序&#xff0c;然后双层循环遍历进行判断&#xff0c;当前一个和后一个相减等于…

Yolov8网络结构学习

详解YOLOv8网络结构/环境搭建/数据集获取/训练/推理/验证/导出/部署 深入解析YOLOv8&#xff1a;网络结构与推理过程 YOLO? You Know! --YOLOV8详解 一&#xff1a;yolov8总体结构 1.Backbone:它采用了一系列卷积和 反卷积层只来提取特征&#xff0c;同时也使用了残差连接和…