事件委派案例

原创 已于 2022-03-28 19:11:30 修改 · 5.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

于 2022-03-27 20:19:36 首次发布
本文通过一个具体的案例，介绍了如何在JavaScript中实现事件委派。首先，创建了一个包含多个li元素的ul列表和一个button，为button设置onclick事件。接着，封装了一个函数并将其绑定到按钮点击事件中，用于动态创建a标签并添加到ul中。同时，对ul进行事件监听，并处理了IE8及以下浏览器的兼容性问题。最后，通过console.log在回调中验证了事件委派的效果。

开发工具与关键技术： Visual Studio Code

1：创建一个button按钮和一个ul标签，ul标签下创建3个li标签，button按钮添加onclick点击事件，li标签添加a标签

2：给button和li添加内容

 

3：给ul添加ID

4：使用封装函数，把封装函数命名添加到onclick点击事件里面

5：创建一个createElement元素

5：创建一个innerHTML属性

6：点击添加元素给ul标签添加一个a标签

7：获取list的id，通过getElementsByTagName获取a标签

8：绑定ul标签的点击事件

9：IE8以下的兼容性

10：回调A标签，输入console.log检查

这是我所学到事件委派案例，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！

huishi__
关注
javascript事件委托详解
weixin_47450807的博客
01-22 1136
事件委派本质上是利用了浏览器事件冒泡的机制。因为事件在冒泡过程中会上传到父节点，并且父节点可以通过事件对象获取到
JavaScript基础(30)_事件的冒泡、事件的委派
no15870678621的博客
08-06 494
js事件的冒泡、事件的委派
事件的委派案例
H_JH123的博客
05-14 167
事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。 Html部分 这里是用一个div包含了四个div且每个div中都给了一张图，如果想要给父div中的每个div都添加点击事件，用JQ的方法如下： $("#row>div").click(function () { //待输入执行代码; } JQ部分 01. target 属性规定哪个 DOM 元素触发了该事件。 注意：这里的变量e后也需要加上索引值，因为需要把它转化为一个js对...
05-事件委派案例
m0_59989185的博客
11-26 212
点击事件、注册表单、标签的增删改查
[整理]近段了解一些委托事件的工作原理.找到两个很不错的例子，所以特拿出与大家分享!
hackate的专栏
06-16 1364
第一个例子http://www.akadia.com/services/dotnet_delegates_and_events.html思归给的委托事件参考站点public delegate void EatEventHandler(object sender, EatEventArgs e); 这个的定义也可以不要这样.可以直接就定义一个参数public delegate void EatEve
简单案例理解委派模式
lp18871701190的博客
08-21 291
首先简单介绍一下委派模式的定义：委派模式不属于23种设计模式，主要是负责任务的调配和分配任务，跟代理模式很像，基本上可以看做特殊情况下的静态代理的全权代理，但是代理模式注重过程，委派模式注重结果，委派模式在spring中用的很多，我们spring中DispatcherServlet就是用到了委派模式，他是负责接收请求，处理过程就需要一个调度。例如我们生活中，在公司里面老板接到了一个项目，把这个任务...
事件委托原理及案例
星河梦~的博客
12-11 1487
事件委托原理：事件冒泡 不给每个子节点单独设置事件监听器，而是把事件监听器设置在其父节点上，让其利用事件冒泡的原理影响到每一个子节点。 简而言之，就是不给子元素注册事件，给父元素注册事件，让处理代码在父元素的事件中执行。 优点：只操作一次DOM,提高了程序的性能。 <ul> <li>第一个子节点</li> <li>第二个子节点</li> <li>第三个子节点</li> <li>第四个子节点</li&
CSharp编程实践：LeetCode题解与委派/事件案例
题目中提到的练习包含建立一个委托，创建委托实例，将具有兼容签名的方法绑定到委托上，并处理委托事件，其中事件触发时只返回最后一个绑定方法的返回值。 5. **事件（Event）的实践**：在C#中，事件是一种特殊的多...
Java双亲委派机制讲解和常见问题解决案例示范
J老熊
10-15 1203
Java 的类加载机制是 JVM 运行时系统的核心之一，而其中的双亲委派机制（Parent Delegation Model）是保证 Java 平台安全性与可扩展性的关键设计。双亲委派机制确保了 Java 体系中类的加载顺序，防止了类的重复加载与覆盖，避免了某些安全性风险。本文将讲解双亲委派机制和常见问题解决及案例示范。
21、事件响应最佳实践与案例分析
最新发布
postgres8guard的博客
09-20 23
本文深入探讨了事件响应的最佳实践与真实案例，涵盖谷歌数据中心停电和PagerDuty时钟漂移事件的详细响应过程。文章强调在事件处理中优先减轻影响的重要性，介绍了明确角色分工、多团队协作、使用专用工具和定期演练等关键策略。通过对比成功与假设失败案例，总结出高效事件响应的核心要素，并提出通过定期回顾、模拟游戏和经验分享持续提升响应能力的方法，为组织构建高可用系统提供全面指导。
JavaScript事件委托案例
KevinMiGuan的博客
11-29 649
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt;     &lt;ul
事件委托(代理，委派)
m0_62962469的博客
03-19 1286
事件委托也称为事件代理，在jQuery里称为事件委派。 原理：不是每个子事件都单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。 案例：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。 事件委托的作用：只操作一次DOM，提高了程序的性能。 ...
委派模式简单示例
sendear的博客
03-28 311
委派模式的定义 委派模式（Delegate Pattern）的基本作用就是负责任务的调度和分配任务，跟代理模式很像，可以看做是一种特殊情况下的静态代理的全权代理，但是代理模式注重过程，而委派模式则注重结果。 委派模式不属于GOF23种设计模式之一，它属于行为型模式。 在Spring中一般以Delegate， 或者 Dispatcher结尾的都是委派模式。 委派模式的作用 委派模式可以精简程序...
委派的示例
ooyyee的专栏
05-25 547
using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Text;using System.Windows.Forms;namespace weipai{    public partial clas
委派模式的实例介绍
一只超级迷茫的猿
03-15 643
委派模式 委派模式的基本作用就是负责任务的调度和分配任务，跟代理模式很像，可以看做是一种特殊情况下的静态代理的全权代理，但是代理模式注重过程，委派模式注重结果。不属于GOP23种模式之一，属于行为模式。 在我们工作中，最常见的一种情况就是，当我们公司老板想做一个东西，他要找到我们项目经理发送一个命令，然后我们项目经理接受到这个命令的时候，项目经理会根据这个东西来进行对团队里面的员工来分配。所以，我...
12.①事件委托（委派）：给祖先元素添加点击事件，进行事件冒泡（点击小的，会弹出大的）②列表添加新的子元素, 自动有事件响应处理③even.target判断触发事件④轮播图
lazylYYY的博客
08-13 656
一：事件委派（事件的委托）： -当需要为多个元素绑定相同的响应函数时，可以统一将事件绑定给它们共同的祖先元素， 这样只需要绑定一次即可让所有的元素都具有该事件，即使元素是新增的也会具有该事件。 二:委派遇到的问题：祖先元素的可触发范围远大于我们要点击的范围 如下图，我们想点击a时触发点击事件弹出‘你好’，所以我们进行委派给他的祖先元素ul添加此事件。但是我们发现不光点击li可以触发点击事件，点击粉色部分也可以触发点击事件 解决方法：event里面...
编写Javascript函数来实现单击id为test的列表中的li时获取其内容。（事件委托）
远方
12-14 361
利用事件委托，通过冒泡原理将子元素的点击事件交给父元素来处理 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&a
事件的委派
weixin_54668937的博客
08-29 212
文献种类：专题技术文献； 开发工具与关键技术： VS、JS 作者：方建恒 ；年级：20级 ；撰写时间： 2021 年 8 月 28日 下面我们来看一下Javascript里事件的委派， 首先我们要知道事件的委派是什么， 事件的委派就是将事件统一绑定给元素共同的祖先元素， 这样当后代元素上的事件触发时，会一直冒泡到祖先元素， 从而通过祖先元素的响应函数来处理事件。 我们在为每一个a标签绑定一个单击响应事件时， 这种操作比较麻烦，而且这种操作只能为已有的a标签绑定单击事件， 新添加的超链接
事件委派
weixin_57772827的博客
05-07 191
开发工具与关键技术：VS 2019单词 作者：魏钦 撰写时间：2022/5/8 首先打开我们的VS软件，CTRL+ N新建一个HTML文档，在body标签里放一个input标签(文本框)，然后再给input标签一个id，添加在括号里面空格之后再写不然会报错，做一个表格样式，用ul跟li搭配，ul可以作为一个组，li是他的子元素，将他俩用嵌套的方式使用，ul包裹li标签，就这样一个简易的表格就出来了。 然后在ul标签放个id在从里面放三个li标...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值