js之事件委托

2023-11-10

在js的事件流模型中,事件的触发分为3个阶段:

1、捕获阶段:由外向内传播,寻找目标元素;
2、目标阶段:找到事件触发的目标元素;
3、冒泡阶段:事件由内向外冒泡

事件委托也被称为事件代理,那么是事件委托呢?用一个例子来说明。

<div id='app'>
	<div id='app1'></div>
</div>
假如我们需要为app1添加onclick点击事件,通常做法直接在app1上监听点击事件,
而事件委托的做法是,将事件绑定在app上(父元素),然后利用e.target获取触发事件的元素。
这种就是所谓的事件委托。

事件委托的原理就是依赖于事件流模型,即绑定在app1上的点击事件,由于冒泡关系,实际上都相当于触发了app的点击事件。

事件委托的优点和缺点?

优点:
1、将事件绑定到父元素上,可以扩大点击区域(比如子元素存在padding的情形,或者存在别的标签),从而增加用户体验。(一种场景:登陆时,我们可以通过点击账号,而在输入框内输入账号,而不是只能点击输入框才行)
2、减少了dom处理时间,原本需要冒泡,而现在可以直接触发事件了。
缺点:
1、当标签层级嵌套很深(比如在祖父元素进行事件委托),可能会存在性能问题;
2、有些事件如foucs、blus,没有冒泡机制,无法进行事件委托;
3、频繁触发的事件如mouseover等,不适合做事件委托。
//比如mouseover事件中,我们往往需要计算坐标,利用事件委托不好处理。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js之事件委托 的相关文章

  • jQuery .push 到 .get 调用中的数组给出空结果

    谁能告诉我为什么下面给我一个空字符串 当我console log contentArray in the get 回调函数它显示数据 但是当我尝试在下面的代码中执行它时 结果为空 sectionArray contentArray func
  • .push() 将多个对象放入 JavaScript 数组中返回“未定义”

    当我将项目添加到beats数组然后console log用户时 我得到了数组中正确的项目数 但是当我检查 length 时 我总是得到 1 尝试调用索引总是会给我 未定义 如下所示 Tom beats 1 我想我错过了一些明显的东西 但这让
  • 防止垃圾邮件按钮呼叫功能

    如何防止调用函数时出现垃圾邮件按钮 就像用户只能在按钮上每 1 秒调用一次该函数 有办法做到吗 因为我尝试了 setTimeout 但没有成功 它仍然在发送垃圾邮件 顺便说一句 我使用 Jquery 这是我的代码
  • Number.IsNaN() 比 isNaN() 更糟糕吗

    Soooooo isNaNJavaScript 显然被破坏了 比如 isNaN isNaN isNaN true isNaN false isNaN 0 返回 false 当它们看起来都是 不是数字 在 ECMAScript 6 中 草案包
  • 如何在网站上使用 svg 元素制作块的屏幕截图?

    我在网站上创建了一个构造函数 其本质是将所选元素及其颜色 svg中的元素 添加到访问者选择的背景和背景颜色 png中的背景 中 然后必须单击 保存 结果 按钮并仅执行工作区的屏幕截图 我写了这个脚本 但它需要屏幕截图 但只有背景 并忽略选定
  • 转义 h 轮廓

    因此 我一直在尝试找出在被较低级别的标题吸引后添加内容的最佳方法是什么 section h1 Title of Section h1 h2 Related 1 h2 h2 Related 2 h2 p I NEED THIS TO BE P
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • 如何使用 Greasemonkey 监视静态 HTML 页面的更改?使用哈希?

    我希望我的 Greasemonkey 脚本仅在其访问的静态页面具有与以前完全相同的内容时运行 现在我可以设置一个包含该页面哈希的变量 我正在寻找一种动态散列页面的方法 以便我可以将我的散列与生成的散列进行比较 关于如何即时实现散列的任何想法
  • IE 中的 XPath 查询使用从零开始的索引,但 W3C 规范是从一开始的。我应该如何处理差异?

    问题 我正在转换目前仅适用于 Internet Explorer 的相对较大的 Javascript 代码 以便使其也适用于其他浏览器 由于代码广泛使用 XPath 我们做了一些兼容性功能以使事情变得更容易 function selectN
  • mongodb 聚合 - 累积字段的不同组值

    如果我有Player表格文件 name String score Int 我有Group文档 其中组代表玩家列表 groupName String players ObjectID 玩家可以属于多个组 我想做一个聚合Player文档 按以下
  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 具有 100% 高度行和 Internet Explorer 9 的表格

    我有以下示例 div style height 150px background color AAAAFF div
  • LeafleteachLayer函数不会迭代所有Layer

    使用 GeoJSON 数据数组创建一些标记 getJSON GetLocationsServlet function data L geoJSON data onEachFeature onEachFeature addTo mymap G
  • Google Maps API (v3) 添加/更新标记

    编辑 它现在可以工作 但如果用户不允许或没有基于位置的服务 则不会加载 请参阅 jsfiddle 示例接受的答案评论 我已经浏览了一些教程和问题 但我无法安静地理解正在发生的事情 或者在这种情况下 没有发生 当用户单击链接时 我正在加载地图
  • 使用 CSS 折叠和展开元素

    我正在尝试构建一个页面 加载时仅可见标题 并且 当用户单击标题时 每个标题下方的表格会在隐藏和显示状态之间切换 我的限制是只能在 CSS 中执行此操作 这是我到目前为止想到的 https jsfiddle net Argoron c1ypx
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小
  • 从 PHP 数组生成 HTML 表

    我不明白这一点 我需要解决看似简单的问题 但这超出了我的逻辑 我需要编写一个函数 table columns input cols 它将输出一个表 示例 input array apple orange monkey potato chee
  • 在 iOS 7 Safari 中,如何区分通过边缘滑动与后退/前进按钮的 popstate 事件?

    在 iOS 7 Safari 中 现在有两种后退 前进导航方式 使用底部的传统后退 前进按钮箭头或从屏幕边缘滑动 我正在使用动画在 ajax 应用程序中的页面之间进行转换 但如果用户通过边缘滑动进行导航 我不想触发该转换 因为这本身就是一个
  • 滚动顶部不符合预期

    Note 由于上次忘记奖励而重新开放赏金 A Woff 大师已经给出答案 我想在用户展开某一行时到达该行 这样当最后一个可见行展开时 用户不必向下滚动即可查看内容 I used example tbody on click td green

随机推荐

  • Maven项目,本地jar包导入手动导入到Maven库中

    当你的项目 由于网络或者环境这些问题 无法从maven中央仓库更新jar包到本地的时候 可以尝试下面方法 手动添加jar包到Maven仓库 方法一 推荐 1 需要先拿到你的jar包 copy到本地 例如我的就是hutool all 5 8
  • sql注入详细过程

    前提 mysql5 0以上版本包含内置的information schema数据库 它储存着mysql所有的数据库和表结构信息 利用该数据库可以查询到所有的数据库和表的内容 一 5 0 暴力破解的方式获取数据 1 原理 当我们的Web ap
  • 运维工程师绩效考核表_运维人员初步 度绩效考核表

    姓 名 部 门 岗 位 上级领导 时 间 考核分类 考核维 度 权重 指标 数据来源 考核评分 复核 10 计划合理 偏差范围可控 10 分 考评 30 按计划完成的时间 30分 考评 10 机房设备的是否正常运行 10 考评 10 网站的
  • 最大流算法 - 标号法

    标号法求最大流 图论中网络的相关概念见上篇博客 算法基本思想 从某个初始流开始 重复地增加流的值到不能再改进为止 则最后所得的流将是一个最大流 为此 不妨将每条边上的流量设置为0作为初始流量 为了增加给定流量的值 我们必须找出从发点到收点的
  • python3.11安装, 解决pip is configured with locations that require TLS/SSL问题

    系统 centos7 4 虚拟机 python版本 本机自带的2 7 5 以及参考python安装的python3 11 pip版本 本机自带的8 1 2 参考pip安装 升级升级到了20 3 4 pip3版本为22 3 1 openssl
  • FPGA实战小项目2

    基于FPGA的贪吃蛇游戏 基于FPGA的贪吃蛇游戏 基于fpga的数字密码锁ego1 基于fpga的数字密码锁ego1 基于fpga的数字时钟 basys3 基于fpga的数字时钟 basys3
  • 正点原子STM32(基于HAL库)4

    目录 ADC 实验 ADC 简介 单通道ADC 采集实验 ADC 寄存器 硬件设计 程序设计 下载验证 单通道ADC 采集 DMA 读取 实验 ADC DMA 寄存器 硬件设计 程序设计 下载验证 多通道ADC 采集 DMA 读取 实验 A
  • 图的邻接矩阵与邻接表的建立,c/c++描述

    图里数据节点是多对多的关系 一个节点有多个前驱 也有多个后继 甚至还有无向图 不区分前驱和后继 只需要节点之间有邻接关系即可 因此 描述这种数据关系 需要新的数据结构 图有顶点集和边集组成 顶点代表一个数据节点 边代表数据顶点间的邻接关系
  • impdp参数+impdp交互模式的命令列表

    impdp参数 1 help 是否显示用于导入的联机帮助 2 exclude 排除特定的对象豢型 3 directory 让转储文件 日志文件和sql文件使用的目录对象 4 dumpfile 需要导入的转储文件的列表 5 include 包
  • c语言如何定义标识符 常量 变量,标识符、常量和变量

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 1 单选题 C语言主要是借助以下哪个功能来实现程序模块化 A 定义函数 B 定义常量和外部变量 C 三种基本结构语句 D 丰富的数据类型 参考答案 A 参考解析 C语言用函数实现软件的模块化设计
  • 小程序原理

    开发过一段时间小程序了 对于我们现在使用的业务来说 使用小程序开发上手很快 所以反思了一下 那么小程序的原理到底是怎么样的呢 我自己总结一下 小程序的架构 官网原话 当小程序基于 WebView 环境下时 WebView 的 JS 逻辑 D
  • deepfake教程

    https github com iperov DeepFaceLab 首先下载根据不同系统不同显卡分类下载对应版本 能在文件夹下看到以下命令 一 clear workspace 重置 一 提取帧 extract images from v
  • k8s占用的端口号用 kubectl get svc 和lsof -i、netstat 命令都查不到

    如果你使用了 kubectl get svc 和 lsof i 或 netstat 命令查看端口 却没有查到 Kubernetes 的服务 有可能是因为 Kubernetes 服务运行在容器内部 在这种情况下 你可以通过以下步骤来查看 Ku
  • 音视频 ffmpeg ffplay ffprobe命令行

    ffmpeg工具 命令格式 ffmpeg 全局选项 输入选项 i input url 输出选项 output url 帮助命令 查看解封装帮助 dhav ffmpeg4 2才有 ffmpeg h demuxer dhav ffmpeg h
  • 黄广斌谈ELM进展:为深度学习提供理论支持, 将勾连生物学习

    强大的深度神经网络 仍有很多待解决的问题 超限学习机 ELM 发明人 新加坡南阳理工大学副教授黄广斌认为 ELM能够有效地拓展神经网络的理论和算法 近日 黄广斌发表文章 超限学习机 筑梦普适学习和普适智能 Extreme learning
  • 【数据结构】堆的向上调整和向下调整以及相关方法

    文章目录 一 堆的概念 二 堆的性质 三 堆的分类 1 大根堆 2 小根堆 四 说明 五 堆的结构 六 堆的向上调整 1 图示 2 代码实现 3 时间复杂度分析 七 堆的向下调整 1 思路 2 代码实现 八 删除根 1 思路 2 代码实现
  • CentOS6 YUM 源失效问题解决办法

    问题描述 Yum 源失效 无法正常使用 Yum 错误信息如下 http mirrors aliyun com centos 6 updates x86 64 repodata repomd xml Errno 14 PYCURL ERROR
  • CentOs 6.5下java 安装

    我们下载jdk 的rpm包到要安装的服务器上 然后要进行下面的工作 1 移除系统自带的jdk 1 查找系统自带的jdk版本 输入命令 rpm qa grep jdk 2 移除系统自带的jdk 输入命令 yum y remove java 1
  • fatal: Not a git repository (or any of the parent directories): .git

    问题描述 解决方案
  • js之事件委托

    在js的事件流模型中 事件的触发分为3个阶段 1 捕获阶段 由外向内传播 寻找目标元素 2 目标阶段 找到事件触发的目标元素 3 冒泡阶段 事件由内向外冒泡 事件委托也被称为事件代理 那么是事件委托呢 用一个例子来说明 div div di