js事件委托的原理、优缺点

最新推荐文章于 2020-12-17 20:57:02 发布
最新推荐文章于 2020-12-17 20:57:02 发布
阅读量1.1k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x94410891/article/details/109484404
版权

事件委托

什么是事件委托

简单来说,事件就是onclick,onmousemove等等,委托就是把自己的事拜托给别人做,让别人来完成.

原理

利用冒泡的原理,把事件添加到父元素上,委托它们父级代为执行事件

好处

提高性能,减少内存,对于新添加的元素也会有之前的事件

坏处

1.事件委托基于冒泡,不冒泡的事件不支持
2.层级过多,冒泡过程中可能被中间层阻止
3.如果把所有事件都用事件委托,可能会出现事件误判,即不该触发事件的被绑定了

Serein　
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js事件委托及其原理
weixin_30768661的博客
11-26 722
什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。 也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。 好处1：提高性能。 我们可以看一个例子：需要触发每个li来改变他们的背景颜色。 <ul id="ul"> &l...
jQuery事件绑定和委托实例
10-25
本文将深入探讨jQuery中的四种主要事件处理方法：on()、bind()、live() 和 delegate()，以及它们的应用场景和优缺点。 1. on() `on()` 是jQuery中最通用的事件绑定方法，它取代了早期版本中的`bind()`、`live()`和`...
JavaScript事件委托实现原理及优点进行
10-14
主要介绍了JavaScript事件委托实现原理及优点进行,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
1.事件委托的原理以及优缺点 2. 手写原生js实现事件代理，并要求兼容浏览器
qi1271199790的博客
12-04 8701
Q：事件的委托（代理 Delegated Events）的原理以及优缺点 A：委托（代理）事件是那些被绑定到父级元素的事件，但是只有当满足一定匹配条件时才会被挪。这是靠事件的冒泡机制来实现的， 优点是： （1）可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒  （2）可以实现当新增子对象时无需再次对其绑定事件，对于动态内容部分尤为合
JS事件的三个阶段，事件代理/委托的原理及优缺点
weixin_42475867的博客
04-09 821
JS事件的三个阶段，事件代理/委托的原理及优缺点JS事件的三个阶段捕获阶段目标阶段冒泡阶段阻止事件传播（冒泡）的方法阻止浏览器的默认行为总结事件代理/委托的原理及优缺点事件代理/委托的原理事件代理/委托的优缺点适合用事件委托的事件 JS事件的三个阶段 捕获阶段 捕获阶段：事件由页面元素接收，逐级向下，到具体的元素。当使用事件捕获时，父级元素先触发，子元素后触发。 当我们在 DOM 树的某个节点发...
[转载]JS事件委托(事件代理)的原理以及优缺点
weixin_33922670的博客
03-30 205
1，什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。 也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。 好处呢：1，提高性能。 我们可以看一个例子：需要触发每个li来改变他们的背景颜色。 <ul id="ul"> ...
Advanced[removed]高级JavaScript
05-20
- **异步控制流**：Promise.all、Promise.race、async/await的使用场景和优缺点。 - **设计模式**：如单例模式、工厂模式、观察者模式等在JavaScript中的实现。 - **性能分析**：使用Chrome DevTools等工具进行性能...
事件委托的原理以及优缺点
weixin_49346957的博客
11-04 2624
事件委托 原理 : 利用事件冒泡的机制 优点 : 提高Javascript性能,减少内存消耗 动态添加DOM元素 缺点 : 事件委托基于冒泡 , 对于不冒泡的事件不支持 层级过多,冒泡过程中,可能会被某层阻止掉 把所有事件都用代理就可能会出现事件误判,好比把不应该触发事件的 绑上了事件. ...
《概率论与数理统计》第三版课后习题答案..pdf
03-05
《概率论与数理统计》第三版课后习题答
概率论与数理统计教程 茆诗松 答案 高等教育出版社
11-15
概率论与数理统计教程 答案 高等教育出版社 茆诗松 程依明 主编 最近上传 因数据量大 后期不断更新 （131） 第二部分地址http://download.csdn.net/source/1840499
什么是事件委托？事件委托的原理以及优缺点
panghu_bupang的博客
12-17 8412
事件委托又称事件代理, 下面将要将要简要叙述一下这种方法的原理及优点 一什么是事件委托? 我们看下面的例子: 假使我们需要对 3 个 li 元素添加点击事件: 传统的方法是分别给每个 li 元素绑定 click 事件 假使 li 元素特别多呢?可能你已经想到这样一个一个添加 click 事件是相当麻烦的, 那么是否有优化方法呢? 当然, 我们只需要在 ul 元素上添加一个事件处理程序这种在 DOM 树中尽量最高的层次上添加事件处理程序的方式便是事件委托, 主要用于解决事件处理程序过多问.
js 事件委托优缺点
qq_28773159的博客
03-24 501
优点 减少了事件注册，节省了内存，如在 table 上代理所有 tr 的 click 事件 简化了 dom 更新时的事件操作，如现在 table 内增加了一行 tr，不用再为这个 tr 添加事件了 缺点 事件委托基于冒泡，不冒泡的事件无法委托，如 blur、focus、mouseenter、mouseleave、input、keydown、keyup 可能被中间层阻止 事件会频繁的被调用...
js中事件委托的优缺点
weixin_30762087的博客
03-22 216
优点： 减少事件注册，节省内存。比如， 在table上代理所有td的click事件。 在ul上代理所有li的click事件。 简化了dom节点更新时，相应事件的更新。比如 不用在新添加的li上绑定click事件。 当删除某个li时，不用移解绑上面的click事件。 缺点： 事件委托基于冒泡，对于不冒泡的事件不支持。 层级过多，冒泡过程中，可能会被某层阻止掉。 理论上委托会导致浏览器频...
事件委托的原理
weixin_46174785的博客
09-12 1770
事件委托的原理： 事件委托，就是把一个元素响应事件（click、keydown…）的函数委托到另一个元素； 1：事件的冒泡，所以才可以在父元素来监听子元素触发的事件。 2：DOM的遍历，一个父级元素包含的子元素过多，那么当一个事件被触发时，是否触发了某一种类型的元素呢？ 这是事件委托的两个核心，跟事件委托相关的技术点，如果碰到什么问题，都可以在这两个点进行切入，来寻求解决方案。 事件的冒泡这个要讲一下，在 document.addEventListener 的时候我们可以设置事件模型：事件冒
html事件委托原理,JQuery事件委托原理与用法实例分析
最新发布
06-08
HTML事件委托原理：在HTML中，一个元素可以包含多个子元素，当子元素上发生事件时，事件会向上冒泡到父元素，如果在父元素上绑定了事件处理程序，那么父元素就可以处理子元素的事件。这就是HTML事件委托的原理。 JQuery事件委托原理：JQuery中使用on()方法来实现事件委托，该方法的参数有三个：事件类型、选择器、事件处理函数。当事件类型发生在选择器匹配的元素上时，事件处理函数就会被调用。JQuery会在父元素上绑定一个事件处理程序，然后通过选择器匹配子元素，从而实现事件委托。 用法实例分析： HTML事件委托的用法实例： ```html <ul id="list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> ``` ```javascript document.getElementById('list').addEventListener('click', function(event) { if (event.target.tagName === 'LI') { console.log('You clicked on item: ' + event.target.textContent); } }, false); ``` JQuery事件委托的用法实例： ```html <ul id="list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> ``` ```javascript $('#list').on('click', 'li', function(event) { console.log('You clicked on item: ' + $(this).text()); }); ``` 在JQuery中，可以使用on()方法来为父元素绑定事件处理程序，然后使用选择器来匹配子元素。这样，当子元素上发生事件时，JQuery就可以调用事件处理函数了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值