事件委托的原理:不给每个子节点单独设置事件监听器,而是设置在其父节点上,然后利用冒泡原理设置每个子节点。

优点:

1- 减少内存消耗和 dom 操作,提高性能 在 JavaScript 中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,因为需要不断的操作 dom,那么引起浏览器重绘和回流的可能也就越多,页面交互的事件也就变的越长,这也就是为什么要减少 dom 操作的原因。每一个事件处理函数,都是一个对象,多一个事件处理函数,内存中就会被多占用一部分空间。如果要用事件委托,就会将所有的操作放到 js 程序里面,只对它的父级进行操作,与 dom 的操作就只需要交互一次,这样就能大大的减少与 dom 的交互次数,提高性能;

2- 动态绑定事件 因为事件绑定在父级元素 所以新增的元素也能触发同样的事件

什么是事件代理(事件委托) 有什么好处相关推荐

  1. JavaScript事件代理和委托

    2019独角兽企业重金招聘Python工程师标准>>> 浏览器的事件冒泡 当事件发生后,这个事件就要开始传播.例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身不能处 ...

  2. 简诉事件代理(事件委托)及其优点

    事件代理 不给每个子节点单独设置事件监听器,而是设置在其父节点上,然后利用冒泡原理设置每个子节点. 优点 1. 减少内存消耗和 dom 操作,提高性能. 在 JavaScript 中,添加到页面上的事 ...

  3. JS 事件代理和事件委托

    目录 事件委托的概念理解 为什么要用事件委托 事件委托的原理: 事件代理(委托)实现 总结: 事件委托的概念理解 为什么叫事件委托?它还有一个名字叫事件代理. JavaScript高级程序设计上讲:事 ...

  4. Event事件-1:addEventListener事件监听 / 事件冒泡事件捕获 / 事件委托 / preventDefault 阻止默认行为 / cancelBubble、stopPropa...

    addEventListener 事件监听器 target.addEventListener(type, listener[, options|useCapture])     添加事件监听 参数: ...

  5. 使用事件代理实现vue的手风琴组件

    1.为什么要使用事件代理? 在项目中要做一个手风琴组件,需求是页面created事件中请求数据,以显示在列表中,加载数据时显示"正在加载",没有数据了就显示"没有更多数据 ...

  6. 用例子解释事件模型和事件代理

    事件模型 事件传播模型 在说事件代理之前,先来说一下事件模型. 在浏览器开发的早期,面对事件触发模型的问题,所有的程序员都认为事件触发不应该是直接触发的,而应该在文档中有一个传播的过程,然而事件传播的 ...

  7. 事件链、事件代理、页面的渲染过程、style的操作、防抖与节流【DOM(四)】

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 目录 文章目录 1.事件链(冒泡目标捕获) (1)事件链原理 (2)阻止冒泡和默认事件 2.事件代理(面试笔试题重点) 3. ...

  8. a标签点击事件_DOM事件机制

    前言 本文主要介绍DOM事件级别.DOM事件模型.事件流.事件代理和Event对象常见的应用,希望对你们有些帮助和启发! 一.DOM事件级别 DOM级别一共可以分为四个级别:DOM0级.DOM1级.D ...

  9. js中的事件委托或是事件代理详解(转载)

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

  10. JS事件委托或者事件代理原理以及实现

    事件委托(事件代理)原理:简单的说就是将事件交由别人来执行,就是将子元素的事件通过冒泡的形式交由父元素来执行. 为什么要用时间委托? 在JavaScript中,添加到页面上的事件处理程序数量将直接关系 ...

最新文章

  1. php smarty fetch,fetch()
  2. 在扩展Spock时输出给定值
  3. 2022年保险行业展望
  4. [Usaco2005 nov]Grazing on the Run 边跑边吃草 BZOJ1742
  5. html5字体转换,图片转字符画html5版
  6. api 另一窗体 之上_12 个设计 API 的安全建议,不要等出事儿了“捶胸顿足”
  7. 【大规模图像检索的利器】Deep哈希算法介绍
  8. 真心推荐8个高质量Java学习网站,一起从入门到精通java语言,大厂java面试真题分享,建议码住!
  9. 【RevitAPI】BuiltInParameter 枚举项
  10. MacOS Ventura 13.0 Beta6 (22A5331f) 带 OC 0.8.4 三分区原版黑苹果镜像
  11. 手风琴效果案例(jQuery)
  12. linux终端字体颜色_使用printf打印出各种颜色字体
  13. 香港虚拟主机与国内虚拟主机区别
  14. 【ACWing】1129. 热浪
  15. 栈迁移过程记录,栈指针rsp、rbp、rip、leave变化过程
  16. 如何用Python操控手机APP攻略!建议收藏!很全面
  17. 有什么好的OCR软件可以实现图片转文字
  18. linux系统各服务相关设置
  19. 【静态时序分析】如何寻找时序分析的起点与终点
  20. 互联网企业数据安全体系建设(美团点评)

热门文章

  1. WIN10系统打不开局域网共享
  2. Python生成exe文件的方法
  3. Git GUI客户端选择
  4. 阅读材料精选 From-to-Date:2019.04.04~2019.04.29
  5. window class, OO
  6. 全志A10芯片参数,A10处理器简介
  7. 地球坐标系与投影方式
  8. 树莓派安装python3.8_python-在树莓派3上运行librosa和numba
  9. java实现语法高亮插件_通用代码高亮插件(SyntaxHighlighter)
  10. 基于IAP和USB技术的嵌入式系统应用程序升级