原生JS之事件委托

最新推荐文章于 2024-04-14 19:33:29 发布
最新推荐文章于 2024-04-14 19:33:29 发布
阅读量783 收藏 1
点赞数
分类专栏： 原生JS 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44186636/article/details/112469057
版权

目录

一、什么叫事件委托（事件代理）

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。通俗讲，就是有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收【故事借鉴于大牛】。

二、为什么要用事件委托

一般来说，Dom需要有事件处理程序，我们都会直接给它设事件处理程序就行，那如果是很多的Dom需要添加事件处理呢？这个时候就需要用到事件委托，给它们的父元素设置一个事件处理程序，利用冒泡的原理，把事件加到父级上，触发执行效果。

三、事件委托的原理

事件委托是利用事件的冒泡原理来实现的，就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。【借鉴】

四、事件委托的实现

本案例是通过事件委托来点击按钮的加减来改变input的值（常用于购物网站中购物车页面商品数量的加减）

// HTML代码
<div class="js_button">
最低0.47元/天 解锁文章
工藤洗衣机
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
原生JS实现Promise
weixin_44739881的博客
10-23 211
为了能完成一周至少一更的计划，还没有写讲解，先放上源码。为了便于理解，我把代码调整成相对精炼。最近忙着学习算法和Python，我会在空暇时间抓紧写讲解。希望我能够帮到你，感谢。 源码 function MyPromise(executor) { var self = this self.status = 'pending' self.onResolvedCallback =...
JavaScript之事件委托实例(附原生js和jQuery代码)
10-19
下面小编就为大家带来一篇JavaScript之事件委托实例(附原生js和jQuery代码)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JS基础_事件的冒泡
weixin_41804367的博客
08-31 183
事件的冒泡 1、什么是事件的冒泡？ 当某个子类元素的某类型事件被触发时，其父类元素、祖类及以上级元素的相同类型的事件也会产生效果。 2、举例 <html> <!--编码格式--> <meta charset="UTF-8"> <head> <style> #box { width: 200px; height: 200px; backgr
原生js的事件委托
butcher的博客
06-22 932
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件委托</title> </head> <body> <ul i
JS事件委托
YuHang6686的博客
04-10 8406
作用：事件委托主要用来减少内存消耗，不用处理多次循环绑定 使用方法： var target = document.getElementsById("获取元素") //元素调用 target.addEventListener(type, listener, options); type：必选参数,需要绑定的事件名称，"不要带on" listener:必选参数，回调函数，你需要绑定的方法； options：可选参数，默认为false；表示"事件冒泡"，设置为true后为"事件捕获" 1、捕获阶段：事件从win
js事件委托
Free雅轩的博客
08-27 1141
对于第二个优点我们遇到的应该比较多，例如当我们需要在ul中动态添加几个li时，如果用传统的方法，for循环为li添加事件，问题就出现了，最开始有的li是有onmouseover和onmouseout事件的，但是后来动态生成的li里没有这两个事件处理函数，因为for循环的时候它还没生成。而事件委托的方式就没事，当后来动态生成的li出现的时候，不用做改变，移到它身上，还是变色的，因为事件是绑定在ul身上的。实现原理：js中事件冒泡我们知道，子元素身上的事件会冒泡到父元素身上。js事件委托有的说法也叫事件代理。.
经典面试题分析——原生JS如何实现事件委托(1)，字节跳动现场面试
最新发布
m0_61067876的博客
04-14 862
012345点我添加一个li首先要为现有li元素绑定事件新增加的li也要绑定事件3. 编写一个添加节点的方法先// 为按钮绑定点击事件// 新增li的内容为ul当前子元素的个数==就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
详解js的事件代理（委托）
01-19
JavaScript事件代理（委托）一般用于以下情况：  1. 事件注册在祖先级元素上，代理其子级元素。可以减少事件注册数量，节约内存开销，提高性能。  2. 对js动态添加的子元素可自动绑定事件。 之前一直用各种js库的...
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
01-21
本文实例讲述了JS实现为动态添加的元素增加事件功能。分享给大家供大家参考，具体如下： 我们在日常开发中有时会通过js创建一些元素，但是如果使用原始的for循环给创建的节点添加事件的方法往往行不通： <!...
原生Javascript插件开发实践
10-20
然而，实际开发中还可能涉及到更多的细节，比如动画效果、插件的销毁方法、事件委托等。持续优化和改进插件设计，使其更符合用户需求，是提升插件质量的关键。同时，遵循良好的编码规范和文档记录，也能使插件更易于...
原生js事件委托
demiling的博客
10-23 6846
之前面试的时候就被问过，什么是事件委托？ 事件委托：给父元素绑定事件，用来监听子元素的冒泡事件。也就是事件目标（子元素）不处理事件，把事件委托给父元素去处理。 看下图理解事件冒泡： 事件委托的好处：不需要对每一个子元素绑定事件，只需要在父元素上绑定事件，减少了操作DOM节点的次数，从而减少浏览器的重加载，提高代码的性能。 因此当子元素较多，需要对子元素进行监听的时候，可以使用事件委托。 //原生...
JS的事件委托（Event Delegation）
一颗松鼠
10-27 1308
事件委托是一种在JavaScript中处理事件的技术。它利用了事件的冒泡机制，将事件处理程序绑定到它们的共同祖先元素上，而不是直接绑定到每个子元素上。当事件触发时，事件会从子元素一直冒泡到祖先元素，然后通过判断事件的目标元素来执行相应的事件处理程序。
经典面试题分析——原生JS如何实现事件委托
欧阳的技术博客
08-07 1007
原生JS实现事件委托1. 什么是事件委托2. 实现事件委托（第一步，基本结构）3. 编写一个添加节点的方法先4. 实现事件委托 1. 什么是事件委托 官方文档 事件委托就是利用事件冒泡，指定一个事件处理程序，就可以管理某一类型的所有事件。———— JS高程 举个例子 我们将快递寄到公司，但是可能快递到的时候，我们人却没在，便可以委托前台小姐姐代收。 第一：现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的 第二，新员工也是可以被前台MM代为签收的，可能人还没到，快递先到了，即程序
JavaScript原生系列-事件代理(事件委托)、事件捕获、事件冒泡
pcaxb的专栏
09-09 765
转载请注明预见才能遇见的博客：http://my.csdn.net/ 原文地址：https://blog.csdn.net/pcaxb/article/details/100665670 JavaScript原生系列-事件代理(事件委托)、事件捕获、事件冒泡 目录 1.事件委托作用 2.以往注册事件 3.用addEventListener(type,listener,useCaptur...
JS事件代理（事件委托）
lplovewjm的博客
11-25 996
本文详细讲解JavaScript中关于事件代理技术相关的内容以及源码实例的讲解。那么好，本文正式开始事件代理作为JavaScript中一种常用的技术，它主要价值是在于允许将子元素的事件处理程序绑定在父元素中，比如表格中的每一条数据对应表格就是子对父，而当我们想通过一个事件来绑定旗下所有条数据时，我们就可以通过调用table表格来实现这个功能，从而简化代码并且提高性能。
js原生事件委托
smileboyjian的博客
07-24 443
1.普通的是事件委托  这里有一个兼容性要注意,var e=e|| window.event;var target = e.target || e.srcElement;  都是为了兼容IE     111     222     333     444 window.onload=function(){ var oUl = document.getElementBy
什么叫事件委托？ JS事件代理原理分析
zy1992As的博客
03-14 473
因为有时候需要给某一类元素加事件(例如给所有li加点击事件)，因为网页内容经常改变，这类元素随时会增加或者减少，为了保证所有这类元素都有事件，也为了节约内存，所以都需要采用事件委托才可实现!需要注意的是，这也是字符串，并且，参数2可以不写，那就代表仅仅只是给父元素加一个点击事件，并且所有子元素都能触发到这个事件(因为事件冒泡)答案是否定的，因为根据事件冒泡原理，所有子元素点击后都会触发父元素的点击，因此，如果你点击了span，也会调用ul的点击事件，这就相当于给span也加了点击事件。这时候该怎么解决呢?
JavaScript事件代理和事件委托
weixin_33860553的博客
07-31 173
一、概述： 　　那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同一个例子，就是取快递来解释这个现象，我仔细揣摩了一下，这个例子还真是恰当，我就不去想别的例子来解释了，借花献佛，我摘过来，大家认真领会一下事件委托到底是一个什么...
给我写一段原生js事件委托的代码
03-11
好的，以下是一段原生js事件委托的代码： ```javascript document.addEventListener('click', function(event) { if (event.target.matches('.my-class')) { // 在这里写你想要执行的代码 } }); ``` 这段代码会...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值