【简单事件委托例子】

最新推荐文章于 2022-05-18 01:05:41 发布
最新推荐文章于 2022-05-18 01:05:41 发布
阅读量313 收藏
点赞数
分类专栏： 原生js事件委托 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/buaichiluobo/article/details/123585507
版权

事件委托: 本来该子元素的事情 交给父元素, 父元素接收到事件之后, 会找到触发的子元素，交给子元素处理

原理: 事件加给父元素 通过触发源(target\srcElement)找到子元素

优点: 1. 执行速度快

2. 子元素可以发生在未来

html部分：

javascript部分：

今天吃点啥‍️
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
winform委托和事件经典例子
02-09
winform委托和事件经典例子，委托 和 事件 winform 传值 子传父 父传子
委托与事件的简单例子
08-29
通过这个简单的例子，我们可以看到委托和事件在实际开发中的应用，它们提供了一种干净、解耦的方式来处理通信和事件传递，使得代码更加模块化和易于维护。了解并熟练掌握委托和事件对于C#开发者来说至关重要，因为...
事件委托原理及案例
星河梦~的博客
12-11 1328
事件委托原理：事件冒泡 不给每个子节点单独设置事件监听器，而是把事件监听器设置在其父节点上，让其利用事件冒泡的原理影响到每一个子节点。 简而言之，就是不给子元素注册事件，给父元素注册事件，让处理代码在父元素的事件中执行。 优点：只操作一次DOM,提高了程序的性能。 <ul> <li>第一个子节点</li> <li>第二个子节点</li> <li>第三个子节点</li> <li>第四个子节点</li&
C#【委托/事件篇】委托经典实例
星Yeah 的博客
06-30 2041
实例1： 实例2： 实例3： 实例4： 实例5： 实例6：
【JAVAScript】【4】利用事件委托简化点击事件（包含箭头函数，target）
weixin_51612770的博客
05-18 1357
JAVASCript利用事件委托简化点击事件 当写多个点击事件时我总是会添加很多监听函数，但是利用事件委托后仅需添加父元素的监听函数，在利用冒泡就可以为每个子元素添加监听函数，大大简化了程序 文章目录JAVASCript利用事件委托简化点击事件前言一、事件委托二、箭头函数三、Element.target四、实例总结 前言 以下是围绕事件委托（事件代理）的一个切换案例，同时补充箭头函数和Element.target 一、事件委托 JavaScript中常用绑定事件的常用技巧，“事件委托”即是把原本需要
javascript事件详解和事件冒泡, 捕获介绍, 事件委托经典例子
翾的博客
12-07 4016
事件 ele.onxxx = function(event) { } 兼容性好, 但是一个元素的同一个事件上只能绑定一个处理程序 基本等同于写在HTML行间 obj.addEventListener(type, fn, flase); IE9以下不兼容, 可以为一个事件绑定多个处理程序 obj.attachEvent(‘on’ + type, fn); IE独有, 一个事
C# 委托事件简单的使用例子
06-04
这是C# 委托与事件简单的使用例子。 只是为了初学者更好的接受委托与事件使用方法而已。 程序有两个窗体，一个是主窗体，一个是副窗体。 打开主窗体，在主窗体中点按钮后，打开副窗体，在副窗体中，可以调整主窗体...
c#委托和事件简单示例
08-17
本文将深入探讨C#中的委托和事件，并通过一个简单的示例进行演示。 ### 1. 委托（Delegates） **概念**：委托在C#中相当于一种类型安全的函数指针，它可以引用一个或多个方法。委托可以作为参数传递给方法，也可以...
asp.net 事件和委托 简单例子
12-27
ASP.NET中的事件和委托是.NET框架中非常重要的概念，它们在构建动态、响应用户交互的Web应用程序时起着核心作用。本文将通过一个简单的C#示例，深入探讨这两个概念及其在实际编程中的应用。 首先，让我们理解什么是...
事件委托
01-08
以下是一个简单的例子，展示了如何使用事件委托： ```javascript // 获取所有li元素、ul元素和添加按钮 var lis = document.querySelectorAll("li"); var ul = document.querySelector("ul"); var btn = document....
事件委託案例
auyeung_anne的专栏
05-31 572
假设我们有个高档的热水器，我们给它通上电，当水温超过95度的时候：1、扬声器会开始发出语音，告诉你水的温度；2、液晶屏也会改变水温的显示，来提示水已经快烧开了。 　　现在我们需要写个程序来模拟这个烧水的过程，我们将定义一个类来代表热水器，我们管它叫：Heater，它有代表水温的字段，叫做temperature；当然，还有必不可少的给水加热方法BoilWater()，一个发出语音警报的方法Ma
js事件委托-事件对象以及相关案例
码云仓库地址：https://gitee.com/lance-gyq
01-21 733
接上一章 事件委托 <body> <ul> <li>知否知否，点我应有弹窗在手！</li> <li>知否知否，点我应有弹窗在手！</li> <li>知否知否，点我应有弹窗在手！</li> <li>知否知否，点我应有弹窗在手！</li> <li>知否知否，点我应有弹窗在手！</li&g
手写事件委托
qq_45060976的博客
03-05 159
手写事件委托 ul.addEventListener('click',function(e){ if(e.target.tagName.toLowerCase() === 'li') { fn() } }) 事件委托的好处 1.节省监听器，当我们要同时监听一个父元素里面的多个子元素时，只需要监听这个父元素就可以 2.实现动态监听，js中是不能给新添加的元素添加监听器，所以我们只需要监听它的父元素就可以触发事件 ...
前端大杂烩之JS（五）
xuyuexiong的博客
06-12 308
15. 举例说明一个匿名函数的典型用例 最常见的用法(function() { alert('water'); })(); 带参数(function(o) { alert(o); })('water'); 链式调用(function(o) { alert(o); return arguments.callee; })('water')('down');...
javascript-委托事件(事件代理)
leon的博客
07-20 1549
委托事件
js事件委托的总结
冰雪为融的博客
03-16 217
事件委托：也叫事件代理，简单点说就是，把事件绑定到父级上，监听子元素的冒泡事件。至于什么是事件冒泡有疑问的请点击js中的事件，其中有对事件冒泡的详细解释在使用事件委托的时候我们要知道的知识点有什么呢？1、在利用事件委托的时候，我们还必须要知道一个概念：事件对象下的事件源事件源：在事件中，当前操作的那个元素就是事件源。比如我们点击a标签发生onclick事件时，事件源就是a标签，当点击li发生onc...
极简略介绍 javascript 事件代理（事件委托）
深谷逸风的博客
08-29 445
极简略介绍 javascript 事件代理概念 自身的事件通过冒泡机制代理到父辈元素上，让父辈元素代替自己来执行所要执行的事件； 用途 父元素当中多个子元素含有相同事件； 动态创建的元素含有某种事件； 首先谈谈多个子元素问题 <div class="goods-list"> <div class="goods-view"> <img src="img
JS之事件委托实例
XiaoDong的博客
11-16 625
通过JS的事件委托来实现五子棋实例的基本结构。该实例是模仿燕十八老师的实例做的。 事件委托(事件委托给上一级，通过target来辨别委托给哪个事件) table{ width: 400px; height: 400px; border: 0; border-collapse: collapse; background: green; } td{ bo
案例事件委托详情页切换案例
qq_38068491的博客
10-15 466
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; *{ margin: 0; padding: 0
举一个关于委托的代码例子
最新发布
06-08
以下是一个简单的关于委托的代码例子： ```csharp using System; namespace DelegateExample { // 定义一个委托类型 public delegate void Operation(int a, int b); // 定义一个包含委托类型的类 public class Calculator { // 定义两个方法，用于加法和减法运算 public void Add(int a, int b) { Console.WriteLine("{0} + {1} = {2}", a, b, a + b); } public void Subtract(int a, int b) { Console.WriteLine("{0} - {1} = {2}", a, b, a - b); } } class Program { static void Main(string[] args) { // 创建一个Calculator对象 Calculator calculator = new Calculator(); // 创建一个委托对象，指向Calculator对象的Add方法 Operation addOperation = new Operation(calculator.Add); // 创建一个委托对象，指向Calculator对象的Subtract方法 Operation subtractOperation = new Operation(calculator.Subtract); // 使用委托对象调用Calculator对象的Add方法 addOperation(3, 4); // 使用委托对象调用Calculator对象的Subtract方法 subtractOperation(5, 2); } } } ``` 在这个例子中，我们首先定义了一个Operation委托类型，然后定义了一个Calculator类，其中包含了两个方法Add和Subtract，用于加法和减法运算。接着，在Main方法中，我们首先创建了一个Calculator对象，然后创建了两个委托对象addOperation和subtractOperation，分别指向Calculator对象的Add方法和Subtract方法。最后，我们使用这两个委托对象分别调用了Calculator对象的Add方法和Subtract方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值