事件委托也称事件代理，在jQuery里面就称为事件委派。 事件委托就是把事件监听放在祖先元素（如父元素、爷爷元素）上。...事件委托的原理 不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利事件用冒泡的原理影响设置每个子节点 事件委托作用 绑定事件越多，浏览器内存占用越大，严重影响性能 只操作一次DOM...//e.target 得到点击的那个对象 }) target 与 currentTarget 的区别： e.target: 用户操作的元素 e.currentTarget: 程序员监听的元素 比如上例中，...e.target 就是 li ，e.currentTarget 就是 ul 以上代码中，并没有给每一个元素绑定事件，只是给父节点ul绑定事件，但是点击每一个li时，可以变换其样式。...image.png 事件委托的优点： 1.减少事件注册，节省内存。 在table上代理所有td的click事件。 在ul上代理所有li的click事件。 2.可以监听动态生成的元素。
前言 这两天一直在想如何结合实际案例来结束委托与事件的讲解，下面讲解两个事例，用来加深对委托及事件的理解。 事例一（分页功能） 本场景是用来讲解使用的，具体内容功能需自行填补实现。...用委托加事件来实现分页功能的通用。按上一节讲解中的逻辑处理，分为订阅者和发布者，一样的可以先定义订阅者感兴趣的对象，然后发布者，订阅者。再就是主程序调用。...public event PageActionEventHandler PageAction; //定义保护方法判断委托事件是否为空,传入参数e类型为EventArgs...; } } } 谨记，事件基于委托，为委托提供了一种发布/订阅机制。理解发布订阅机制就会容易多了。一旦理清楚，发现好像也并不是很难的。...总结 委托与事件到这里就大结局了。一些列的问题也解决了。心中的疑惑也揭开了。下面我们就接着基础系列写其他的了。 曾经，我们懵懵懂懂地看完了狮子王，知道有个勇敢坚强的小狮子叫辛巴。
事件委托 1. 基本概念 事件委托，简单的来说，就是把一个元素的响应事件的函数委托到另一个元素。...前面提到 DOM 中事件委托的实现是利用事件冒泡的机制，那么事件冒泡是什么呢？ 2. 事件传播 事件的传播分为三个阶段：「捕获阶段」、「目标阶段」、「冒泡阶段」。...事件委托的好处 减少内存消耗 试想一下，如果我们有一个列表，列表之中有大量的列表项，我们需要在点击列表项的时候响应一个事件。...因此，比较好的方法就是把这个点击事件绑定到他的父层，然后在执行事件的时候再去匹配判断目标元素。所以事件委托可以减少大量的内存消耗，节约效率。...动态绑定事件 比如上述的例子中列表项就几个，我们给每个列表项都绑定了事件。
另外在列表中的按钮被添加或删除后，你必须还要手动删除或附加事件监听器。 有没有更好的方法？ 幸运的是，如果我们使用“事件委托”模式的话，侦听多个元素上的事件只需要一个事件侦听器。...事件委托使用事件传播机制的细节。想要要了解事件委托的工作原理，应该先了解什么是事件传播。...3.事件委托 让我们用事件委托来捕获多个按钮上的点击： 。单击按钮时，父元素的侦听器将会捕获冒泡事件（还记得前面所说事件传播吗？）。...使用事件委托需要 3 个步骤： 步骤 1：确定要监视事件的元素的父级元素 在上面的例子中， 是按钮的父元素。
概念 事件委托也叫事件代理，事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。...动态绑定： 新生dom节点如果用原来的方式是无法绑定事件的，用委托的方式这方面可以轻松实现，保证父元素存在即可。...原理 利用事件冒泡，而冒泡指的就是事件从向上传递事件，如果事件有相应的函数绑定就会执行其绑定函数。...举例：ul下的li元素有绑定事件，我们通过ul绑定委托之后，委托的源码部分会在其执行函数内针对事件源进行筛选判定是否符合筛选条件（是否是li），然后针对的获取属性或者内容，进行相关的操作。...不适合：mouseover,mouseout, 没有：focus，blur jq写法 $(par).on("click",'child',fn) 拓展：事件监听 概述 事件监听：W3C规范中定义了3个事件阶段
事件委托：即是，一个事件本来是要绑定到某个元素上，然而却绑定到了该元素的父（或祖先）元素上，利用事件冒泡原理，触发执行效果。 二、事件委托的优点： 那为什么要使用事件委托？...事件委托有什么好处，以及使用时要注意什么？ 事件委托大概有两个优点： 1、提高网页性能。 2、通过事件委托添加的事件，对后期生成的元素依然有效。 上面提到的第二点如何理解呢？...|| e.srcElement; if(target.nodeName.toLowerCase() === "li"){ alert("li"); } } 从示例代码中可以看出...，要使用事件委托就要利用 event 对象。...index = Array.prototype.indexOf.call(li,target); alert("所点击 li 的下标是：" + index); } } 上述代码中，
在jQuery中，事件委托是一种优化事件处理的技术，它利用事件冒泡的机制，将事件处理程序绑定到一个父级元素上，从而减少事件处理函数的数量，并实现对动态添加的子元素的事件处理。什么是事件委托？...通过事件委托，我们可以避免为每个子元素都绑定事件处理程序，而是将事件处理集中在父级元素上，从而减少了事件处理函数的数量，提高了性能和代码的可维护性。为什么使用事件委托？...处理动态添加的元素：当页面上的元素是通过动态方式添加到文档中时，事件委托可以自动为这些新添加的元素绑定事件处理程序，而无需手动重新绑定。...提高性能：由于事件委托将事件处理程序绑定到父级元素上，避免了为每个子元素都绑定事件处理程序的开销，从而提高了性能。如何使用事件委托？在jQuery中，我们可以使用on()方法结合选择器来实现事件委托。...事件委托适用于以下场景：当页面上的元素是通过动态方式添加到文档中时。当需要为多个子元素绑定相同的事件处理程序时。当需要减少事件处理函数的数量，提高性能和可维护性时。
前言 说起委托和事件，我就想起了再学校的时候，当时死记硬背去记什么是委托什么是事件。记得当时蝼某人问我，委托是什么？...，先去买水然后顺带买了辣条，委托链（多播委托）可以使用+=来增加委托中调用的方法，同理也可使用-=来删除委托中调用的方法. ...同时委托链（多播委托）中注意不要调用一些必须有特定顺序的方法，因为委托中调用其方法链的顺序并未正式定义。 ...委托链（多播委托）还可能出现一个非常严重的问题，也就是在委托中多个方法调用时，一旦出现了异常报错，则整个迭代都会停止。...到这里就介绍完了委托，看上去也挺简单的。我们下一节继续看Event事件。然后结合委托一起看看委托加事件如何运用的。
在另外的类中。...假设我们将GreetingPeople()放在一个叫GreetingManager的类中，那么新程序应该是这个样子的： namespace Delegate { //定义委托，它定义了可以代表的方法的类型...让我们再次改写代码： 输出： Morning, Jimmy Zhang 早上好, Jimmy Zhang 到了这里，我们不禁想到：面向对象设计，讲究的是对象的封装，既然可以声明委托类型的变量(在上例中是...此时，轮到Event出场了，C# 中可以使用事件来专门完成这项工作，我们改写GreetingManager类，它变成了这个样子： 很容易注意到：MakeGreet 事件的声明与之前委托变量delegate1...看到这里，你差不多明白到：事件其实没什么不好理解的，声明一个事件不过类似于声明一个委托类型的变量而已。
它将我们从对特定元素的事件监听中释放出来，如果没有事件冒泡，我们需要监听很多不同的元素来确保捕获到想要的事件。 事件委托 事件委托是一种由其它元素而非事件目标元素来响应事件产生的行为的思想。...通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。...有多种方法来处理事件委托。标准方法来源于原生浏览器的功能。浏览器以一种特定的工作流程来处理事件，并支持事件捕获和事件冒泡。...订阅发布模式 还有其它实现事件委托的方法可以考虑，其中值得一提的就是发布/订阅模型。发布/订阅模型也称为了广播模型，牵涉到两个参与者。...在异步编程中，this可以很容易改变过程中一个功能操作。
C# 中的委托和事件 文中代码在VS2005下通过，由于VS2003(.Net Framework 1.1)不支持隐式的委托变量，所以如果在一个接受委托类型的位置直接赋予方法名，在VS2003下会报错...例如：委托类型 委托实例 = new 委托类型(方法名); 欢迎浏览本文的后续文章： C#中的委托和事件(续) 引言 委托 和 事件在 .Net Framework中的应用非常广泛，然而，较好地理解委托和事件对很多接触...本文中，我将通过两个范例由浅入深地讲述什么是委托、为什么要使用委托、事件的由来、.Net Framework中的委托和事件、委托和事件对Observer设计模式的意义，对它们的中间代码也做了讨论。...// 省略... .Net Framework中的委托与事件 尽管上面的范例很好地完成了我们想要完成的工作，但是我们不仅疑惑：为什么.Net Framework 中的事件模型和上面的不同？...在第二个稍微复杂点的热水器的范例中，我向大家简要介绍了 Observer设计模式，并通过实现这个范例完成了该模式，随后讲述了.Net Framework中委托、事件的实现方式。
从上面可以看出委托实例中不仅保存了函数的地址，还保存了函数所在类的实例，相反看一下C++的函数指针只是保存函数的地址，而不管实例函数属于哪一个类。 ...foreach(var item in 委托实例.GetInvocationList()) { item(); } 并非像（参考2）里面说的多播中的函数不能有返回值。...事件 事件跟委托有许多相似之处，经常不知道使用哪一个，这里着重说明两者的区别。...委托对象定义为public后不仅所属类内部能调用，类外部也能调用；事件不管即使定义为public，也只能在所属类的内部触发，而类外部只能订阅不能触发事件。...总结 使用事件可以降低耦合度，事件的触发与事件的订阅分离，让感兴趣的对象订阅某个对象的全部或部分事件。
一、概述 事件委托，又叫事件代理。事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。 例子：有三个同事预计会在周一收到快递。...这里其实还有2层意思： 第一，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的； 第二，新员工也是可以被前台MM代为签收的，即程序中新添加的dom节点也是有事件的。...二、为什么是使用事件委托 一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？...在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间...三、事件委托原理 事件委托利用的是事件冒泡原理，将事件绑定到父级元素上，当点击子元素时，通过事件冒泡将事件传递到父级元素。 四、总结： 那什么样的事件可以用事件委托，什么样的事件不可以用呢？
另外，如果在实际的应用中，很有可能同过js在 div1下动态生成p 元素，这时候，我们相应地还要添加事件处理函数，像这种动态添加的动作很有可能分散在我们 应用的很多个角落，这样动态添加处理函数将是一个非常蛋疼的事儿...但是，事件委托也是有缺点的： 如果现在的dom 元素分为很多很多层，对于底层事件的委托，有可能在事件冒泡的过程中，中途被某个节点 终止冒泡了，这样事件就传递不到上层，则委托就会失败了。...如果我们在js中动态地给box1 增加子元素P，相应的处理函数也会对其有效。...从元素中删除先前用.live()绑定的所有事件.(此方法与live正好完全相反。)如果不带参数，则所有绑定的live事件都会被移除。...简化了dom节点更新时，相应事件的更新 Allows to use innerHTML without additional processing. 缺点： 第一，要求事件在IE中必须冒泡.
事件机制： 在用户使用键盘、鼠标等设备进行操作时，实际上每一次的操作都是在发起一个事件。...委托事件模型： 用户通过键盘、鼠标等设备进行操纵的行为，最终都传递给了虚拟机，虚拟机接收到这些事件后的处理方案，就称之为事件模型。...就是将监听器委托到主题上，主题一旦发生变动所有的监听器都会进行响应并处理事件。 如图： ? 实现步骤： 实现步骤是先建立一个事件源对象，也就是GUI的各种组件，然后为事件源对象选择合适的监听器。...例如按钮这个对象，在按钮身上发生的最多的就是点击事件，这时就应该选择点击事件的监听器，这个事件的监听器是一个接口所以要写一个类去实现它。 ...： 事件基本分为两类 l 是基本事件：鼠标和键盘事件 l 是语义事件：由组件根据自身业务所定出的事件
一、详细内容 （1） 什么是委托（Delegates）？ 委托是一个对象，它知道如何调用一个方法。...委托的定义:委托类型定义了委托实例可以调用的那类方法，具体来说，委托类型定义了方法的返回类型和参数。..."; } （2） 委托实例 把方法赋值给委托变量的时候就创建了委托实例。...方法是在运行时才赋值给委托变量的。 （3） 多播委托 所有的委托实例都具有多播的能力。一个委托实例可以引用一组目标方法。...委托是不可变的 使用-=或+=操作符时，实际上是创建了新的委托实例，并把它赋给当前的委托变量。 如果多播委托的返回值不是void，那么调用者从最后一个被调用的方法来接收返回值。
https://blog.csdn.net/FE_dev/article/details/78870583 说明 上次我们说了一些，关于 JavaScript中事件委托的 基础知识，这次我们继续来看...){ console.log('li 被点击了'); } } 上面这段代码，用了事件委托...jQuery中的事件委托 jQuery中事件委托主要是靠on( ) 方法，我们先来看看 on( ) 方法的使用说明 on( ) 方法主要有以下两种形式的用法 用法一 jQueryObject.on...','li',function (){ console.log('li 被点击了'); }); 更加详细的关于 JQuery中on...( )方法的解释，推荐看这里 jQuery.on() 函数详解 总结 用到 事件委托 的地方，应该还是比较多的，希望大家都能理解这个东西。
理解委托的一种好的方式是把委托视为是给方法的签名和返回类型指定名称。 今天我们继续来了解委托和事件，现在我们来了解学习一下事件详解。...事件 事件基于委托，为委托提供了一种发布/订阅机制，在.Net中随处可见到这种事件，例如在应用程序中，Button类提供了Click事件，这类事件就是委托。 ...到底事件的一个怎么运行过程呢？在介绍此过程中我们先看下委托与事件的微软编码规范吧。...publiser.Use(mobleType); } } 在Main函数中，进行一个事件的注册，例如小明，进来Main函数，实例化一个发布者，在发布者中绑定了小明的订阅事件...总结 我们仔细考虑下这整个委托与事件，事件的本质也就是对委托的一种使用。看我们事件注册绑定和多播委托的用法是一样的，事件的声明也是使用的委托类。 大家好好想想其中的奥妙，然后理解消化下。
今天给自己的知识结构填个坑，再复习下JS的事件代理。 事件代理可以给JS批量生成的DOM元素添加事件，并且还可以提高效率，因为你确实不用给每个DOM节点添加事件监听了。...事件的监听器，是被添加到了它们的父元素上，监听器会分析从新生成的子元素上冒泡上来的事件，并找到是哪个子元素的事件。...id="li-4">li 4 li 5 li 6 那么，当每个子元素被点击的时候，会发生不同的事件...那么这时，你需要把事件监听器放在它们的父容器 ulId 上面。 这时，当子元素被点击的事件，冒泡到父元素Li上的时候，你就可以通过检查事实的target，从而获取真正被点击的节点元素的引用。...现在大部分JS都会使用jQuery等工具库来处理DOM事件，但对于事件委托的背后原理，我们还是要了解的。 浅谈数据结构 - 字典
事件处理程序为Web程序提供了系统交互，但是如果页面中的事件处理程序太多，则会影响页面的性能。每个函数都是对象，都会占用内存，内存中对象越多，性能越差。...需要事先为DOM对象指定事件处理程序，导致访问DOM的次数增多，会延迟整个页面的交互就绪时间。 事件委托 对事件处理程序过多的解决方案是使用事件委托。...事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。...移除事件处理程序 前文已经讲过事件的添加以及事件的移除。对于页面的事件处理程序太多，会影响页面的性能，除了使用事件委托之外，还可以将一些事件移除。...这样确保内存中也移除了该事件处理程序，而从DOM中移除按钮也非常彻底。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
