事件委托相关

最新推荐文章于 2023-06-27 17:18:45 发布
最新推荐文章于 2023-06-27 17:18:45 发布
阅读量139 收藏
点赞数
分类专栏： 前端埋坑之路-前端技术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011565547/article/details/89495259
版权
本文深入探讨了JavaScript事件委托的概念和作用，通过一个实例展示了如何利用事件委托实现元素操作，包括改变span元素的内容和高亮li元素背景。事件委托提高了代码效率，减少了事件监听器的使用。
摘要由CSDN通过智能技术生成

https://www.cnblogs.com/soyxiaobi/p/9498357.html   彻底弄懂JS事件委托的概念和作用

事件委托(事件代理)的作用? 事件委托的优点:

----------------------下面是自己的案例---------------------------------

var uls = document.querySelector('#uls');  

 

uls.onclick = function(evt){

var evt = evt || window.event;

var target = evt.target || evt.srcElement;

 

if(target.nodeName.toLowerCase() == 'span' && target.className == 'zan'){

var nm = Number(target.innerHTML);

target.innerHTML = (nm 

了解本专栏 订阅专栏 解锁全文 超级会员免费看
做个有准备的人
关注
专栏目录
订阅专栏
JS中事件处理机制（秒懂事件委托、事件捕获和事件冒泡）
百赢出品，必属精品
04-05 1284
综上所述，事件委托利用了事件冒泡的特性来简化事件处理程序的管理和提高性能，而事件捕获相对不常用。在事件捕获阶段，会从根节点开始，逐级向下直到目标元素，所以我们在事件捕获阶段输出了点击的目标元素的文本内容。在事件冒泡阶段，事件会从目标元素开始，逐级向上直到根节点，所以我们在事件冒泡阶段输出了点击的目标元素的文本内容。：在特定情况下，事件委托可以用作事件代理，即将一个对象上的事件委托到另一个对象上，使得第一个对象可以监听和响应第二个对象上的事件。这可以通过事件委托在模态框的父元素上捕获点击事件来实现。
Js中事件委托的实现
小翠学姐的博客
11-04 2401
** 加粗样式 ** 我们首先来看下面一段程序（定义了一个无序列表，其中包括三个li标签）： <ul id="myLinks"> <li id="goSomewhere">Go somewhere</li> <li id="doSomething&
委托与事件代码详解与（Object sender,EventArgs e）详解
weixin_30872671的博客
10-29 279
委托与事件代码详解 using System;using System.Collections.Generic;using System.Text; namespace @Delegate //自定义命名空间，新建控制台程序，命名后自动添加{ // 热水器 public class Heater { private int temperature;...
JS：事件委托（代码）
weixin_59519449的博客
10-11 302
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul{ border: 1px solid; } li{ background: red; margin-bottom: 10px; } </style> &l.
JavaScript事件委托（事件代理）
TongJ_的博客
07-22 603
利用 JS 事件冒泡动态为元素绑定事件的方法称为事件委托（Event Delegation，也称为“事件代理”），是 JavaScript 中最热门的技术之一。
事件委托原理及代码展示
WuqibuHuan的博客
06-30 339
事件委托： 　事件委托就是利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果 <ul id="list"> <li id="item1" >item1</li> <li id="item2" >item2</li> <li id="item3" >item3</li> </ul> var item1 = document.getElementById(“item1”); var item2 = doc
js代码-js事件委托
07-16
JavaScript事件委托是一种优化网页性能的策略，它允许我们为父元素设置一个事件监听器，而不是为每个子元素单独设置。这种技术基于事件冒泡或事件捕获机制，减少了内存消耗和DOM操作，尤其是在处理大量动态元素时...
javascript事件监听与事件委托实例详解
10-16
在前端开发中，事件监听和事件委托是处理用户交互的两种基本而重要的概念。了解并掌握它们的原理和用法，对于提升网页交互性能和用户体验至关重要。 首先，我们来理解事件监听（Event Listening）。在JavaScript中...
C#--委托和事件
05-09
在这个例子中，`xxxEventArgs`类继承了`EventArgs`基类，并且提供了一个构造函数用于初始化事件相关的数据。 #### 三、声明事件 一旦定义了委托类型以及事件参数类，接下来就可以声明事件了。声明事件的基本语法...
JavaScript中的事件委托
m0_75198698的博客
04-28 194
当我们单击列表项时，事件会冒泡到 `myList` 元素，然后被处理程序捕获。然后我们检查目标元素 `event.target` 是否为 `LI` 元素，如果是，则输出被单击的列表项的内容。使用事件委托，我们只需要在祖先元素上绑定一个事件处理程序，并利用事件的冒泡机制来捕获事件，然后通过检查目标元素来确定哪个子元素被单击。而且，当我们单击子元素时，事件会在子元素和祖先元素之间进行冒泡，可能会导致性能问题。通过利用事件的冒泡机制，将事件处理程序绑定到它们的祖先元素上，从而减少了事件处理程序的数量。
html委托事件,HTML 事件(三) 事件流与事件委托(示例代码)
weixin_32689769的博客
06-09 391
本篇主要介绍HTML DOM中的事件流和事件委托。其他事件文章4.HTML 事件(四)模拟事件操作[未发布]目录2.3.2on()1. 事件流 (Event Flow)1.1 何为事件流简单来说HTML的元素会出现嵌套的关系，比如：一个Div嵌套了一个Button按钮，当2个元素都注册了click点击事件。点击里面的Button按钮时，Div的click事件也会触发。那么问题来了，既然都会触...
js事件委托代码优化【感悟总结】
weixin_34032827的博客
08-09 102
前两天接手了同事的一个项目，是一个网站首页，其中有段代码很累赘，要实现的功能就是， 通过给父元素添加鼠标移入移出事件，来控制子元素显示隐藏。 html代码，一共有四个父元素div，每个父元素嵌套一个子元素div， 这是截取了其中一个div： 最简单粗暴的方法莫过于这样： 直接写八个方法，分别设置属性的样式block或者none。 这样写虽然简单，但是出于代码优化，页面响应速度的...
事件委托的封装
anhumi4350的博客
08-29 155
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...
委托 事件 代码理解
张江帆的专栏
01-27 441
 理解 事件委托后 直接写的简单代码··using System;/// /// 事件   委托  简单应用/// public class key:EventArgs{    private string _name;    public key(string name)    {        this._name = name;    }    public string Nam
JS 事件委托
最新发布
似水流年QC的博客
06-27 3437
JavaScript事件委托（Event delegation）又叫事件代理，是一种在父元素上监听事件，然后通过事件冒泡机制来处理子元素的事件的技术。通过事件委托，可以避免为每个子元素都绑定事件处理程序，提高性能并简化代码。事件委托的基本原理是将事件处理程序绑定在父元素上，然后通过事件冒泡捕获到子元素的事件触发。这样，无论子元素是现有的还是动态生成的，它们的事件都会被父元素捕获并处理。
一个事件委托的实例的js代码
liukai6的博客
02-26 349
事件委托的例子下面是完整就是代码window.onload = function () { //获取 var tb = document.getElementById('tb'); tb.addEventListener('click',function(e){ var target = e.target; if (target.innerHT
高程的事件委托代码
baibaider的博客
02-04 184
事件委托：事件处理程序过多时，可以使用事件委托。例如：一个ul下有多个li都有点击事件，这时可以给ul上委托点击事件。并且事件委托的优点：事前消耗低，因为只取得一个DOM元素，占用内存更少。使用事件委托时：在DOM树中尽量最高的层次上添加一个事件处理。代码如下：&lt;ul id="myUl"&gt; &lt;li id="goSomewhere"&gt;goSomewhere&lt;...
深入理解C#委托与事件
C#中的异步编程通常与委托紧密相关，通过`BeginInvoke`和`EndInvoke`方法可以实现方法的异步调用，避免阻塞主线程。 2.8 不使用委托实现Observer模式 虽然委托是实现Observer设计模式的常见方式，但也可以通过其他...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

做个有准备的人

受益虽浅以资鼓励无限

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值