DOM事件委托

最新推荐文章于 2024-06-10 21:57:03 发布
最新推荐文章于 2024-06-10 21:57:03 发布
阅读量266 收藏
点赞数
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64749865/article/details/126646331
版权

事件委托

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

事件委托的原理

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

泡原理影响设置每个子节点。

以上案例:给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点

击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。

事件委托的作用

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

 

野生小农
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DOM 事件模型和事件委托
小陈的博客
07-31 210
事件是用户或者浏览器自己执行的某种动作，是文档或者浏览器发生的一些交互瞬间，比如点击（click）、指针悬浮（mouseover）、提交（submit）等，这是JavaScript与HTML交互的基础，要实现用户与页面的交互，需要先对目标元素绑定特定的事件以及设置事件处理函数，然后用户触发事件执行事件处理函数，最后产生交互效果。DOM是一种树形结构，那么当触发某个元素的时候其父辈元素也被认为触发了吗？例如当点击某个元素的时候，其父辈元素也被认为点击了吗？...
DOM事件与事件委托
baidulixueqin的博客
01-12 381
点击事件 第一部分.概念 <div class=爷爷> <div class=爸爸> <div class=儿子>文字</div> </div> </div> 给3个div分别添加事件监听fnYe/fnBa/fnEr 提问一：点击了谁？ 点击文字，算不算点击儿子？ 点击文字，算不算点击爸爸？ 点击文字，算不算点击爷爷？ 都算 提问二：调用顺序 点击文字，最先调用fnYe/fnBa/fnEr中的哪个函数？ 都行 IE5认
Javascript---- DOM 事件委托
xiangxiang的博客
08-30 361
事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。将本应该绑定给子元素的事件代理给父元素目的:减少dom操作浏览器的重排和重绘,并且新添加的元素也是有事件的。.........
DOM 事件委托
sinat_38021004的博客
07-27 304
由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理 事件委托（delegate），也被称为事件托管或事件代理，就是把目标节点的事件绑定到祖先节点上。这种简单而优雅的事件注册方式基于：事件传播过程中，逐层冒泡总能被祖先节点捕获。 ...
DOM事件委托总结
firstlt0217的博客
05-24 345
DOM事件总结1. 为什么要使用事件委托2.事件委托实现原理3.事件委托实现代码3.1普通方式3.2 委托事件4.鼠标事件绑定4.1效果 1. 为什么要使用事件委托 在 JavaScript 中，页面内事件处理程序的个数会直接影响页面的整体性能， 因为每个事件处理程序都是对象，对象会占用内存，内存中的对象越多， 页面的性能则越差。此外，事件处理程序需要与 DOM 节点进行交互， 访问 DOM 的次数越多，引起浏览器重绘和重排的次数也就越多，从而影响页面的性能。 当页面中很多表格或列表需要添加事件时，如果逐
DOM事件机制
冰霜的博客
09-11 347
事件机制 HTML DOM 允许 JavaScript 对 HTML 事件作出反应。JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。 为了在用户点击元素时执行代码，请向 HTML 事件属性添加 JavaScript 代码： <div id='div1'>我是一个div</div> <button id='btn'>点我啊</button> <!-- 还可以在HTML标签中进行事件的绑定 需要加()--> <.
preact-dom-delegate:实现preact的dom事件委托
05-09
preact-dom-delegate实现 preact 的 dom 事件委托只支持 preact 8，Preact X 可以使用安装$ npm i -S preact-dom-delegate使用说明在 JSX DOM 上设置 on 属性，值为委托处理方法，该方法会传入一个委托对象 delegate...
ftdomdelegate:创建和管理DOM事件委托人
04-27
FT的dom委托库是一个组件，用于绑定与给定选择器匹配的所有目标元素上的事件，而不管注册时DOM中是否存在任何东西。 这使开发人员可以实现。 用法 查看以开始使用ftdomdelegate 。 JavaScript 要导入ftdomdelegate...
轻量级的DOM事件委托小于1KB
08-11
轻量级的DOM事件委托，小于1KB
DOM事件流，冒泡 | 捕获 | 委托 ，详解
01-08
目录（一）DOM事件流① 定义② 图解③ 历史（二）冒泡（三）捕获（四）在不同的阶段执行事件（五）提高内存和性能 — 事件委托① 实例② 优点 （一）DOM事件流 ① 定义 DOM事件流包括三个阶段： 捕获阶段 目标阶段 ...
DOM事件的区别
01-04
DOM事件的区别
dom事件委托
qaqLjj的博客
12-19 397
为什么要用事件委托： 一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？ 在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与...
事件冒泡、事件捕获、DOM2事件流和事件委托、DOM事件中Event对象
yangyang的专栏
02-25 3229
由网上文章整理成，具体可以参考下面文章： https://www.cnblogs.com/xiaohuochai/p/5859476.html https://segmentfault.com/a/1190000013176643 https://segmentfault.com/a/1190000012729080 https://www.cnblogs.com/christineqing/p/...
DOM真正的事件委托
斜光的博客
05-06 238
普通事件委托 ul.addEventListener('click', function(e) { if (e.target.tagName.tolowerCase() == 'li') { console.log('点击了li') } }) 存在问题 如果html是以下结构 <ul> <li> <span></span> ...
DOM事件-事件委托-自定义事件
baozhuona的博客
03-15 812
1.dom事件的级别（发展史） dom0: element.onclick= function(){} dom1: (没有规定事件相关内容) dom2: element.addEventListener(‘click’,function(){}) dom3: element.addEventListener(‘keyup’,function(){}) 除了鼠标点击click事件外，还提供了键...
jsDOM获取元素方法、事件委托、事件捕获和事件冒泡
热门推荐
韶光
06-05 1万+
本篇博文解决的问题： 1、给父元素注册点击事件，特定子元素响应该点击事件；——2.2 事件委托 2、给父元素注册点击事件，点击父元素，所有子元素响应/不响应该点击事件；——2.3 事件冒泡 3、给子元素和父元素注册点击事件，点击子元素，自己有点击事件的父元素响应/不响应自己的点击事件。——2.3 事件冒泡 4、给多个子元素和父元素注册点击事件，点击子元素，只响应子元素的点击事件。——2....
JS中一个dom元素能绑定多少事件
最新发布
ggq53219的博客
06-10 676
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
DOM事件捕获、冒泡和事件委托，不冒泡的事件有哪些
03-31
1. DOM事件捕获：事件从最外层的祖先...3. 事件委托：将事件绑定在父元素上，利用事件冒泡的机制，在父元素上统一处理子元素的事件。 4. 不冒泡的事件有：focus、blur、load、unload、resize、submit、reset、change。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值