事件委托

最新推荐文章于 2024-06-10 17:00:16 发布
最新推荐文章于 2024-06-10 17:00:16 发布
阅读量165 收藏
点赞数 1
分类专栏： 前端知识 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43285211/article/details/104081588
版权

事件委托

什么叫事件委托,事件委托就是通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件

JS事件流

(1)冒泡

​ 冒泡时间大家也一定十分熟悉了,当某一个子元素的绑定的事件被触发了之后,会继续向着父节点触发同类事件

(2)捕获

​ 顺序相反,由下到上触发

使用场景

​ 很多商品放在一个ul下面的li标签里面，点击添加或删除商品，就可以绑定商品的父元素ul标签，通过事件代理去找到要点击的商品，完成添加删除事件

为什么要是用

  1. 如果每一个元素都要绑定一个事件,这样浏览器占用内存会变大,消耗性能
  2. dom元素的改变和重新渲染都会重新绑定
  3. 部分浏览,移除元素的时候,绑定的事件没有及时移除,可能会导致内存泄漏
贪睡的小聪
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript事件委托详解
weixin_47450807的博客
01-22 954
事件委派本质上是利用了浏览器事件冒泡的机制。因为事件在冒泡过程中会上传到父节点，并且父节点可以通过事件对象获取到
vue 事件委托
拿回忆下酒
11-30 1504
Vue 添加事件的方式很方便，在标签元素上以@click=“fnName” 的形式填加就好，而且还有 .stop 、.prevent 、.self 等修饰符，简单好用。 但是如果li非常多呢？给列表上每个li都添加点击事件是不是不太好？ li 添加click <template> <ul> <li class="li" v-for="(m,i) in 5" :key="i" @click="itemFn(m)"></li> </ul
JS 事件委托
似水流年QC的博客
06-27 3235
JavaScript事件委托（Event delegation）又叫事件代理，是一种在父元素上监听事件，然后通过事件冒泡机制来处理子元素的事件的技术。通过事件委托，可以避免为每个子元素都绑定事件处理程序，提高性能并简化代码。事件委托的基本原理是将事件处理程序绑定在父元素上，然后通过事件冒泡捕获到子元素的事件触发。这样，无论子元素是现有的还是动态生成的，它们的事件都会被父元素捕获并处理。
【前端】详解JavaScript事件代理（事件委托）
最新发布
06-10 1万+
【前端】详解JavaScript事件代理（事件委托）
JS事件委托
YuHang6686的博客
04-10 8393
作用：事件委托主要用来减少内存消耗，不用处理多次循环绑定 使用方法： var target = document.getElementsById("获取元素") //元素调用 target.addEventListener(type, listener, options); type：必选参数,需要绑定的事件名称，"不要带on" listener:必选参数，回调函数，你需要绑定的方法； options：可选参数，默认为false；表示"事件冒泡"，设置为true后为"事件捕获" 1、捕获阶段：事件从win
jquery事件委托
m0_54829066的博客
01-07 1853
jQuery 事件委托就是将事件监听器绑定到包含这些元素的父元素上，而不是将事件绑定到每个元素上。这样做的好处是，如果有新的子元素加入到父元素中，它们也能够触发绑定在父元素上的事件。这样，无论何时有新的按钮加入到文档中，它们都能够触发绑定在 body 元素上的点击事件。
vue事件委托
mosowe
06-13 2665
html：    &lt;div class="main" ref="mainheight" @click="clickChatWords"&gt; &lt;div class="talkItem" v-for="(item, index) in chatData" :key="index"&gt;             &lt;d
什么是事件委托
肥晨开发的学习之路
06-21 2365
事件委托（Event delegation）是一种常见的事件处理模式，它利用冒泡机制将事件的处理交给父元素或更高层级的元素来管理，而不是直接将事件处理程序绑定到每个子元素。事件委托模式提供了一种灵活、松耦合的方式来处理事件和回调函数，使得代码结构清晰，可扩展性更强，并提供了多播事件的能力。动态绑定和增加灵活性：当新的子元素被添加到父元素中时，它们会自动继承来自父元素的事件处理程序，无需再次手动绑定事件。通过事件委托，你可以在父元素上监听事件，并根据事件发生的目标元素（子元素）来执行相应的操作。
JavaScript中的事件委托与事件冒泡
xiaban_的博客
04-27 1838
JavaScript中的事件委托与事件冒泡，以及常用的event的属性，其中主要详细讲了event.target
JS中的事件委托实例浅析
10-18
JavaScript中的事件委托是一种高效处理大量动态元素事件的技术，它的核心思想是将事件监听器添加到父级元素上，而不是直接添加到每个子元素。通过利用事件冒泡的特性，当子元素触发事件时，事件会向上冒泡到父元素，...
JavaScript事件委托实现原理及优点进行
10-14
JavaScript事件委托是一种高效处理大量动态DOM元素事件的技术，它基于事件冒泡机制，将事件监听器添加到父元素而非所有子元素上。这种技术的主要优点在于性能优化和动态添加DOM元素的适应性。 1. **什么是事件委托...
JavaScript事件委托实例分析
10-24
JavaScript事件委托是一种优化网页性能的事件处理技术，它利用了事件冒泡的原理，将事件处理器绑定到一个共同的父元素上，而不是每个子元素都单独绑定。这种方法减少了内存消耗和DOM操作，尤其是在动态添加或删除...
事件委托实例
04-09
标题中的“事件委托实例”指的是在编程中，尤其是JavaScript或Web开发中的一种高效处理大量事件的方法。事件委托是基于事件冒泡或事件捕获机制，将事件监听器添加到父级元素而不是每个子元素上，以此来减少内存占用...
小程序自定义组件slot的使用
热门推荐
贪睡的小聪
11-14 1万+
小程序自定义组件slot的使用 在自定义的组件中使用插槽slot 自定义组件 &amp;lt;view class=&quot;contant&quot;&amp;gt; &amp;lt;view class=&quot;title-box&quot;&amp;gt;标题1&amp;lt;/view&amp;gt; &amp;lt;slot class=&quot;contant-box
Codemirror在Vue里面使用
贪睡的小聪
04-19 8229
codemirror 首先先安装好依赖包 npm install codemirror yarn add codemirror 引入性对应的依赖包 import 'codemirror/theme/ambiance.css'; import 'codemirror/lib/codemirror.css'; import 'codemirror/addon/hint/show-hint.css'; const CodeMirror = require('codemirror'); require('cod
Vue模块化管理
贪睡的小聪
05-14 5705
Vue模块化管理 一般vue文件: <!-- 渲染模板 --> <template> <div></div> </template> <!-- 脚本执行代码 --> <script> export default{ name:'', data(){ r...
Vue使用腾讯地图
贪睡的小聪
03-04 5203
腾讯地图在vue上面使用 url:https://lbs.qq.com/javascript_v2/ 上面是腾讯地图的传送门 准备步骤 首先去注册一个账户,获取一个KEY,这个KEY 是腾讯那边提供的,等等再下面代码会用到 使用步骤 在vue项目的public 下,找到index.html 文件 在head头部加入代码 &lt;script charset="utf-8" src="http...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值