【Javascript】web前端开发的重点——事件委派（代理）

最新推荐文章于 2023-10-31 09:39:44 发布
最新推荐文章于 2023-10-31 09:39:44 发布
阅读量156 收藏
点赞数
分类专栏： html web 前端 文章标签： javascript 前端 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44587107/article/details/120962505
版权
web 同时被 3 个专栏收录
47 篇文章 1 订阅
订阅专栏
html
44 篇文章 0 订阅
订阅专栏
前端
41 篇文章 0 订阅
订阅专栏

Javascript事件委派介绍

JavaScript

web前端开发的重点——事件委派（代理）

事件委托

  • 也叫事件代理，在jquery里称事件委派

事件委托的原理（要求记忆背诵）

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

  • 比如在之前的案例我们给ul注册了点击事件，然后利用对象的target来找到当前被点击li，因为被点击的li包含在ul的里面，事件会冒泡到ul上，ul有注册事件，就会触发下面的事件监听器
  • ul.addEventListener(‘click’,function(){},false)
  • 事件监听器的第三个选项不填则默认为false冒泡

事件委托的作用

  • 我们只操作了一次DOM，提高了程序的性能
  • 如果会熟练地运用事件委派原理，那么我们今后的子元素的事件不必再单独分配注册一个事件了，只需要给其父元素安排事件即可
玖夜Kty
关注
专栏目录
Web前端中javaScript设计模式事件委派
Ic10000的博客
12-09 256
一、事件委派 当给多个子元素绑定监听事件，利用事件冒泡的特性(子元素发生事件，默认事件会进行向上传递的过程)，取消对子元素的监听事件，给父元素绑定相同类型的监听事件。 优势： 减少绑定事件 可以绑定未来元素 减少浏览器的开销 寻找触发事件元素: 为什么要找 : this永远指向的是绑定事件的元素（父元素） 使用; 高级浏览器: target 和 srcElement IE:srcElement 执...
电商前端工程师：国内WEB前端开发经验之路
09-01 2023
一直想写这篇“十日谈”，聊聊我对Web前端开发的体会，顺便解答下周围不少人的困惑和迷惘。我不打算聊太多技术，我想，通过技术的历练，得到的反思应当更重要。 　　我一直认为自己是“初级”前端开发工程师，一方面我入道尚浅，只有短短几年，另一方面我自知对技术的钻研并不深入，可能是由于环境的原因，当然最重要的是，我幸运的参与到互联网崛起的浪潮之巅。时势造就了一批技能薄弱但备受追捧的“弄潮者”，这在很大
web中的事件委托
许保殿的博客
02-28 6547
在前端开发中，我们经常碰到这样的应用场景，用列表（ul和li）展示许多条相似的数据，而且每条数据（dom）上都有类似的事件操作，例如线上商城购物车、招聘网站中招聘信息的展示等等，点击每条信息展示详细内容。如下图所示： 其代码如下： 如果在ul中的每个li都添加一个点击事件，不仅不方便，而且会影响网页性能。解决方法就是使用事件委托来定义点击事件。 事件委托的根本是根据浏览器事件的冒泡原...
JS事件委托
aiwu9318的博客
06-16 114
hello,沐晴，又来更新啦，今天呢就接着上篇博文讲讲冒泡带给我们的一大优点，就是产生了所谓的事件委托，初听事件委托，觉得有点高大上，了解过后发现它真是个非常有用的东西。OK,下面就跟我一起一探究竟把。。。 先看看解析，事件委托：也称事件代理 就是利用冒泡的原理 把加事件加到父级上，触发执行效果 首先呢，你一定写过这样的程序，有一个列表，当鼠标移入每个li，背景颜色变红...
JQuery7：事件委托
尹成的技术博客
11-14 396
#事件委托 事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。 ###一般绑定事件的写法 $(function(){ $ali = $('#list li'); $ali.click(function(event) { $(this).c...
前端(十三):JS事件委派、事件绑定、事件传播、滚轮事件、键盘事件、键盘移动div
张不帅
06-28 368
文章目录事件的委派事件的绑定事件的传播拖拽 事件的委派 事件的委派：指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"&g
【学习笔记】「Web APIs」JavaScript进阶
weixin_44802075的博客
08-27 365
前言 1.1 JS的组成 1.2 JS基础阶段及Web APIs阶段 2.1 API 2.2 Web API 2.3 API和Web API总结 一、DOM 1、DOM简介 1.1、什么是DOM 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 1.2...
NC开发笔记——二开知识点
热门推荐
獨立小橋風滿袖
05-06 2万+
用友集团ERP客户化开发系列丛书 NC客户化开发进阶 培训教程 V2.0版 本教程是用友软件股份有限公司内部培训资料，只限于用友公司内部开发应用，任何人未经过事先书面许可不得扩大本教程的使用范围。同样，未经过用友公司书面许可，任何人不得以任何形式对本手册进行增删、改编、节选、翻译、翻印或仿制，违者必究！ ?本手册的著作权属于用友软件股份有限公司 版权所有?翻制必
关于前端架构的过去、现在与未来
作一个独立连续的思考者
02-13 4267
早期的软件架构模式建立在有限的硬件功能上并尊重这一事实，然而，今天的情况已经变了。计算能力在不断提升，而软件架构印证了这种观点。本文从经典MVC说起，详尽解读了当代前端架构及下一阶段的展望。对于前端工程师，以及想从宏观层面理解现代Web应用程序架构的Web开发人员来说，均能从中获益。 软件架构的核心思想，就是推断软件系统各个组件之间数据流动的方式。 软件架构的质量取决于你设法推断这些数据流的...
javascript学习笔记
阿瑶的博客
06-14 482
阿瑶的js学习笔记
WebAPI-事件委托
weixin_44486539的博客
11-22 344
概述 事件委托（也叫事件代理）主要是用来解决后生成元素（动态添加的元素）的事件绑定问题 实现原理：将事件绑定在已存在的父级元素上，当触发子元素时，会通过事件冒泡，事件会冒泡到父元素身上。 举个例子： 到了中午，一个宿舍的哥们都要去买午饭，要么每个人都去买，要么把这件事情委托给宿舍中的某个人（叫“爸爸”），要么让这个人一次性去买，然后再根据床位将其一 一分发给指定的同学；在这里，买午饭就是一个事件...
Web APIs——事件委托
最新发布
weixin_48719464的博客
10-31 504
事件委托（Event delegation）是一种JavaScript设计模式，用于处理事件监听和处理程序的优化。它通过将事件处理程序绑定到父元素而不是绑定到子元素，从而减少DOM元素上的事件处理程序数量。事件委托是利用事件流的特征解决一些开发需求的知识技巧给父元素注册事件例如，如果我们有一个包含多个按钮的列表，并且希望在单击按钮时执行某些操作，则可以将单个事件监听器添加到整个列表。当单个按钮被单击时，事件将冒泡到列表元素，并且我们可以检查事件目标以确定哪个按钮被单击，然后执行相应的操作。
事件的委派
qq_51088023的博客
07-21 1286
这种为每个超链接都绑定一个单击响应函数比较麻烦，而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定。可以用事件的委派只绑定一次事件，即可应用到多个元素上，即使是后添加的元素。可以将单击事件绑定给ul来实现。预期效果通过点击按钮，可以向ul中添加超链接列表，点击超链接时会弹出窗口，输出超链接的文本内容。...
前端事件委托那些事儿
qq_45219069的博客
03-14 423
相信事件委托对于前端来说都不陌生，无非是对于一个列表ul中有很多li，而每一个li都有一个事件处理程序；如果数据量过大，绑定事件过多势必会影响性能，因此有了事件委托的概念。 本意：将事件绑定在ul上，因为有事件冒泡，所以当点击li时，就会冒泡到ul上；这样只需判断下当前触发源是哪一个li，就可以处理对应的事件 情况一：正常情况 //这里就简单以vue渲染方式来处理 <ul @click="onClick" > <li v-for="item in 10" :key="item" :dat
事件委托
WebDestiny的博客
08-29 340
利用事件冒泡的原理，就是让自己的所触发的事件，让他的父元素代替执行！ 当有多个类似的元素需要绑定事件时，一个一个去绑定即浪费时间，又不利于性能，这时候就可以用到事件委托，给他们的一个共同父级元素添加一个事件函数去处理他们所有的事件情况 代码分析：可能大家会疑惑，我们并没有给li分别设置点击函数，为什么点击相应的li却会产生效果，我们可以这么理解，虽然我们没有给li设置点击事件，但是默认的点击事...
《C#类设计手册》读书随笔(3)
weixin_34205076的博客
09-04 105
Programmer To Programer 丛书C# Class Design HandbookRichard Conway, Teun Duynstee等著 清华大学出版社 事件和委托基于事件的编程是.NET Framework的基石.NET Framework中的事件机制使用了委托（回调）事件作为一种常用的方法来解除事件源对象（生成事件的对象）与事件接收器对象（接受事件通知的对象）之...
Web APIs：事件高级--事件委托
薛定谔的猫
10-22 311
事件我抽象的理解为像click,mouseover这种，而事件监听器，则是事件执行的函数。这就是我们点击了li标签，事件冒泡到了ul，触发了ul的事件，然后响应函数ul的事件函数。以上案例：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上， ul 有注册事件，就会触发事件监听器。点击每个 li 都会弹出对话框，以前需要给每个 li 注册事件，是非常辛苦的，而且访问 DOM 的次数越多，这就 会延长整个页面的交互就绪时间。
事件委托（事件委派）
m0_67841039的博客
04-05 1386
1、定义：把原本需要绑定在子元素的响应事件（click、keydown……）委托给父元素，让父元素担任监听的职务。 2、原理：DOM元素的事件冒泡； 3、事件冒泡 前面提到事件委托的原理是DOM元素的事件冒泡，那么事件冒泡是什么呢？ 一个事件触发后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段 4、优点：①可以大量节省内存占用，减少事件注册，比如：在ul上代理所有的li的click事件就非常棒。②可以实现当新增子对象时无需再次对其绑定（动态绑定事件） 5、.
Web APIs DOM- 事件委托 +综合案例
黑马程序员官方博客
07-18 216
1.不管添加还是删除，都是操作的数据（数组），然后从新渲染页面。把数组的数据渲染到页面中，同时清空表单里面的值，下拉列表的值复原。一、事件委托是利用事件流的特征解决一些开发需求的知识技巧。为了提高性能，最好使用事件委托方式，找到点击的是链接。事件对象.target可以获得真正触发事件的元素。点击录入按钮，把表单里面的值都放入数组里面。学号自动生成，是数组最后一个数据的学号+1。注意，渲染之前，先清空以前渲染的内容。事件委托其实是利用事件冒泡的特点。根据当前的删除链接，找到这条数据。...
Web前端开发技术——HTML,CSS,JavaScript 答案
05-20
3. JavaScript：一种编程语言，用于为网页添加交互性和动态效果。 这三种技术是构建现代 Web 应用程序的基础。HTML 提供了页面的结构，CSS 提供了页面的样式和布局，而 JavaScript 则为页面添加了交互性和动态效果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值