Web APIs:事件高级--事件委托
创始人
2024-03-30 02:48:41
0

事件冒泡本身的特性,会带来的坏处,也会带来的好处,需要我们灵活掌握。生活中有如下场景:

咱们班有100个学生, 快递员有100个快递, 如果一个个的送花费时间较长。同时每个学生领取的时候,也需 要排队领取,也花费时间较长,何如?

解决方案: 快递员把100个快递,委托给班主任,班主任把这些快递放到办公室,同学们下课自行领取即可。

优势: 快递员省事,委托给班主任就可以走了。 同学们领取也方便,因为相信班主任。

事件冒泡本身的特性,会带来的坏处,也会带来的好处,需要我们灵活掌握。程序中也有如此场景:


                
  • 知否知否,应该有弹框在手

  •             
  • 知否知否,应该有弹框在手

  •             
  • 知否知否,应该有弹框在手

  •             
  • 知否知否,应该有弹框在手

  •             
  • 知否知否,应该有弹框在手

  •         

点击每个 li 都会弹出对话框,以前需要给每个 li 注册事件,是非常辛苦的,而且访问 DOM 的次数越多,这就 会延长整个页面的交互就绪时间。

事件委托 

事件委托也称为事件代理, 在 jQuery 里面称为事件委派

事件委托的原理

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

以上案例:给 ul 注册点击事件,然后利用事件对象的 target 来找到当前点击的 li,因为点击 li,事件会冒泡到 ul 上, ul 有注册事件,就会触发事件监听器。

事件委托的作用

我们只操作了一次 DOM ,提高了程序的性能。


  • 知否知否,应该有弹框在手
  • 知否知否,应该有弹框在手
  • 知否知否,应该有弹框在手
  • 知否知否,应该有弹框在手
  • 知否知否,应该有弹框在手

其实如果正常理解的话,会感觉这更像是事件的捕获,其实并不是。在理解事件的冒泡前提,要了解什么是事件,什么是事件监听器。事件我抽象的理解为像click,mouseover这种,而事件监听器,则是事件执行的函数。这就是我们点击了li标签,事件冒泡到了ul,触发了ul的事件,然后响应函数ul的事件函数

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
Fluent中创建监测点 1 概述某些仿真问题,需要创建监测点,用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装(Wind... 前言:刚换了一台电脑,里面所有东西都需要重新配置,习惯了所...
MFC文件操作  MFC提供了一个文件操作的基类CFile,这个类提供了一个没有缓存的二进制格式的磁盘...
有效的括号 一、题目 给定一个只包括 '(',')','{','}'...
【PdgCntEditor】解... 一、问题背景 大部分的图书对应的PDF,目录中的页码并非PDF中直接索引的页码...