概念 事件委托也叫事件代理，事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。...动态绑定： 新生dom节点如果用原来的方式是无法绑定事件的，用委托的方式这方面可以轻松实现，保证父元素存在即可。...原理 利用事件冒泡，而冒泡指的就是事件从向上传递事件，如果事件有相应的函数绑定就会执行其绑定函数。...举例：ul下的li元素有绑定事件，我们通过ul绑定委托之后，委托的源码部分会在其执行函数内针对事件源进行筛选判定是否符合筛选条件（是否是li），然后针对的获取属性或者内容，进行相关的操作。...从这里可以看到没有直接针对特定元素绑定事件，而是对事件源进行匹配，所以不存在新生元素无事件的问题。
一、概述 事件委托，又叫事件代理。事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。 例子：有三个同事预计会在周一收到快递。...这里其实还有2层意思： 第一，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的； 第二，新员工也是可以被前台MM代为签收的，即程序中新添加的dom节点也是有事件的。...二、为什么是使用事件委托 一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？...，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能； 每个函数都是一个对象...三、事件委托原理 事件委托利用的是事件冒泡原理，将事件绑定到父级元素上，当点击子元素时，通过事件冒泡将事件传递到父级元素。 四、总结： 那什么样的事件可以用事件委托，什么样的事件不可以用呢？
今日看下拉列表时用到事件委托，特意在网上搜查了一些资料， http://www.cnblogs.com/liugang-vip/p/5616484.html 这篇文章写的很详细，非常感谢作者。...事件委托也叫事件代理，事件委托就是利用事件冒泡，指定一个事件处理程序，就可以管理某一类型的所有事件，何为事件冒泡呢，就是从事件最深的节点开始，然后逐步向上传播事件，最大的优点是提高性能 一般的做法 <ul...oLi.innerHTML = 111*num; oUl.appendChild(oLi); }; } 适合用事件委托的事件...不适合的就有很多了，focus，blur之类的，本身就没用冒泡的特性，自然就不能用事件委托了。...我的理解是：事件委托都是在外围的div添加事件，当点击内部的一个元素时，即使这个元素没有onclick事件，依然会从内到外执行onclick事件，js中外部div 添加事件的函数内 var ev = ev
document.getElementById("spec_area").addEventListener("click",function(e) { // 检查事件源e.targe是否为Li... // console.log(e.target.nodeName); if(e.target && e.target.nodeName == "INPUT") { // // 真正的处理过程在这里...console.log("111"); document.getElementById("new_library").innerHTML=''; } } }); 网上的example...document.getElementById("parent-list").addEventListener("click",function(e) { // 检查事件源e.targe是否为Li...if(e.target && e.target.nodeName.toUpperCase == "LI") { // 真正的处理过程在这里 console.log("List item
js事件委托的优点 1、绑定在父元素上只需要绑定一次，节省性能。 2、子元素不需要每个人都绑定同一个事件。 3、如果后续添加新的子元素，由于事件委托，会自动接收父元素的事件监控。...实例 //原生js事件委托的例子，css部分可以忽略 <!...document.querySelector("ul"); var li = document.querySelectorAll("li"); ul.onclick = function(e){//e指event,事件对象...var target = e.target || e.srcElement; //target获取触发事件的目标(li) if(target.nodeName.toLowerCase() == 'li...'){//目标(li)节点名转小写字母，不转的话是大写字母 alert(target.innerHTML) } } 以上就是js事件委托的优点，希望对大家有所帮助
在JavaScript的学习中，我们经常会遇到JavaScript的事件机制，例如，事件绑定、事件监听、事件委托（事件代理）等。这些名词是什么意思呢，有什么作用呢？...hello1 事件委托 事件委托就是利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果。...在实际的代码中 我们可能用到jQuery的live()、delegate()、bind()、on()等。 事件委托优点 1、提高JavaScript性能。...事件委托可以显著的提高事件的处理速度，减少内存的占用。 实例分析JavaScript中的事件委托和事件绑定 ，这篇文章写得还不错。...说明事件委托可以为新添加的DOM元素动态的添加事件。
答案：利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！ 解析： 1、那什么样的事件可以用事件委托，什么样的事件不可以用呢？...- 适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。...- 不适合的就有很多了，举个例子，mousemove，每次都要计算它的位置，非常不好把控，在不如说 focus，blur 之类的，本身就没用冒泡的特性，自然就不用事件委托了。...3、事件冒泡与事件委托的对比 - 事件冒泡：box 内部无论是什么元素，点击后都会触发 box 的点击事件 - 事件委托：可以对 box 内部的元素进行筛选 4、事件委托怎么取索引？... aaaaaaaa 事件委托了 点击当前，如何获取 这个点击的下标 cccccccc<
js事件委托如何理解 1、每个函数都是对象，占用内存。内存中的对象越多，性能越差。解决事件处理过多问题的办法是事件委托。 2、事件委托冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。... text1 text2 text3 以上就是js...事件委托的理解，希望对大家有所帮助。...更多js学习指路：js教程 收藏 | 0点赞 | 0打赏
事件委托也称事件代理，在jQuery里面就称为事件委派。 事件委托就是把事件监听放在祖先元素（如父元素、爷爷元素）上。...由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理。...事件委托的原理 不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利事件用冒泡的原理影响设置每个子节点 事件委托作用 绑定事件越多，浏览器内存占用越大，严重影响性能 只操作一次DOM...事件委托实现 dianwo dianwo dianwo dianwo dianwo...image.png 事件委托的优点： 1.减少事件注册，节省内存。 在table上代理所有td的click事件。 在ul上代理所有li的click事件。 2.可以监听动态生成的元素。
前言 这两天一直在想如何结合实际案例来结束委托与事件的讲解，下面讲解两个事例，用来加深对委托及事件的理解。 事例一（分页功能） 本场景是用来讲解使用的，具体内容功能需自行填补实现。...用委托加事件来实现分页功能的通用。按上一节讲解中的逻辑处理，分为订阅者和发布者，一样的可以先定义订阅者感兴趣的对象，然后发布者，订阅者。再就是主程序调用。...public delegate void PageActionEventHandler(object sender, PageChangeEventArgs e); //定义委托类型的事件...; } } } 谨记，事件基于委托，为委托提供了一种发布/订阅机制。理解发布订阅机制就会容易多了。一旦理清楚，发现好像也并不是很难的。...很快能掌握的。 总结 委托与事件到这里就大结局了。一些列的问题也解决了。心中的疑惑也揭开了。下面我们就接着基础系列写其他的了。
事件委托 1. 基本概念 事件委托，简单的来说，就是把一个元素的响应事件的函数委托到另一个元素。...一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数...前面提到 DOM 中事件委托的实现是利用事件冒泡的机制，那么事件冒泡是什么呢？ 2. 事件传播 事件的传播分为三个阶段：「捕获阶段」、「目标阶段」、「冒泡阶段」。...所以事件委托可以减少大量的内存消耗，节约效率。 动态绑定事件 比如上述的例子中列表项就几个，我们给每个列表项都绑定了事件。...如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的。
事件监听器分析冒泡事件，去找到匹配的子节点元素，然后做出相应的事件响应。 事件委托具体是怎么工作的呢？ 我们从下面的简单的例子开始，给大家展示事件委托的工作原理。...另外，如果在实际的应用中，很有可能同过js在 div1下动态生成p 元素，这时候，我们相应地还要添加事件处理函数，像这种动态添加的动作很有可能分散在我们 应用的很多个角落，这样动态添加处理函数将是一个非常蛋疼的事儿...但是，事件委托也是有缺点的： 如果现在的dom 元素分为很多很多层，对于底层事件的委托，有可能在事件冒泡的过程中，中途被某个节点 终止冒泡了，这样事件就传递不到上层，则委托就会失败了。...jquery 对事件委托的支持 在jQuery里对事件委托的支持，有以下几个函数： ?...如果我们在js中动态地给box1 增加子元素P，相应的处理函数也会对其有效。
需要事先为DOM对象指定事件处理程序，导致访问DOM的次数增多，会延迟整个页面的交互就绪时间。 事件委托 对事件处理程序过多的解决方案是使用事件委托。...事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。...通过元素id，为每个元素执行不同的if语句。 并不是所有的事件都适合使用事件委托，比较适用的事件是：mouseup、mousedown、click、keyup、keydown和keypress。...虽然mouseover和mouseout也支持事件冒泡，但是如果使用事件委托则处理就比较麻烦，而且需要计算鼠标的位置以及元素的位置（当鼠标从一个元素移到其子节点，或者移出元素都会触发mouseout事件...移除事件处理程序 前文已经讲过事件的添加以及事件的移除。对于页面的事件处理程序太多，会影响页面的性能，除了使用事件委托之外，还可以将一些事件移除。
事件委托：即是，一个事件本来是要绑定到某个元素上，然而却绑定到了该元素的父（或祖先）元素上，利用事件冒泡原理，触发执行效果。 二、事件委托的优点： 那为什么要使用事件委托？...事件委托有什么好处，以及使用时要注意什么？ 事件委托大概有两个优点： 1、提高网页性能。 2、通过事件委托添加的事件，对后期生成的元素依然有效。 上面提到的第二点如何理解呢？...举个例子：现在页面上有个 ul，ul 里有三个 li，通过循环给每个 li 添加点击事件，发现三个 li 到可以正常触发点击事件了，然后通过 js 代码在 ul 里插入（append）两个 li， 再试着点击所有...三、事件委托的使用方法： 使用上面 ul 的例子进行事件委托给每个 li 绑定事件，示例代码： var ul = document.querySelector("ul"); ul.onclick =...注意：事件代理可能带来的隐患，当页面非常复杂的情况下，非常容易引起混乱，特别是当多种（个）事件通过事件委托绑定到同一个元素上时。
在jQuery中，事件委托是一种优化事件处理的技术，它利用事件冒泡的机制，将事件处理程序绑定到一个父级元素上，从而减少事件处理函数的数量，并实现对动态添加的子元素的事件处理。什么是事件委托？...通过事件委托，我们可以避免为每个子元素都绑定事件处理程序，而是将事件处理集中在父级元素上，从而减少了事件处理函数的数量，提高了性能和代码的可维护性。为什么使用事件委托？...提高性能：由于事件委托将事件处理程序绑定到父级元素上，避免了为每个子元素都绑定事件处理程序的开销，从而提高了性能。如何使用事件委托？在jQuery中，我们可以使用on()方法结合选择器来实现事件委托。...通过事件委托，无论是已存在的元素还是后续动态添加的元素，都会共享同一个事件处理程序，实现了统一的事件管理。...事件委托的优点和适用场景事件委托有以下优点：减少事件处理函数的数量，提高代码的可维护性和性能。可以处理动态添加的元素，无需手动重新绑定事件处理程序。可以统一管理事件处理程序，使代码更加简洁和易于维护。
事件对象 包含事件相关的信息，如鼠标、时间、触发的DOM对象等 js默认将事件对象封装好，并自动的以参数的形式，传递给事件处理函数的第1个参数，如下： document.getElementsByTagName...("div")[0].onclick = function(e){ e = window.event || e; //兼容IE低版本（事件对象绑定在window的event上） console.log...(e);//这里e就是事件对象 } 事件的属性和方法 type：获取事件类型（click、mouseover等等） target：获取发生的所在元素（在低版本IE下用srcElement属性） stopPropagation...() 阻止事件冒泡（IE用cancelBubble属性为false阻止冒泡） preventDefault() 阻止事件默认行为（IE用returnValue属性为false阻止默认行为） 事件委托 利用...target属性，获取时间发生的所在对象，避免全体子元素加事件，对比如下： var tbs=document.getElementsByTagName("td"); for(var i=0;i
前言 说起委托和事件，我就想起了再学校的时候，当时死记硬背去记什么是委托什么是事件。记得当时蝼某人问我，委托是什么？...在这个例子中都是返回的string，都是无参数的 委托链（多播委托） 上面我们简单的介绍了下委托及其用法，这里我们可以了解一下委托链，顾名思义，委托链也就是委托连续，啥意思呢？...注意，委托链（多播委托）--委托的签名必须返回void，否则就只能得到委托调用的最后一个方法的结果。...，参数也是string类型的一个方法 总结 以前总在说委托与事件，都没有一次去了解熟悉它，现在得好好巩固一下了。...到这里就介绍完了委托，看上去也挺简单的。我们下一节继续看Event事件。然后结合委托一起看看委托加事件如何运用的。
它将我们从对特定元素的事件监听中释放出来，如果没有事件冒泡，我们需要监听很多不同的元素来确保捕获到想要的事件。 事件委托 事件委托是一种由其它元素而非事件目标元素来响应事件产生的行为的思想。...通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。...有多种方法来处理事件委托。标准方法来源于原生浏览器的功能。浏览器以一种特定的工作流程来处理事件，并支持事件捕获和事件冒泡。...W3C关于浏览器怎么支持事件的文档：W3C DOM Level 3 Events。一些JS库和框架公开了其它方式，如发布/订阅模型（将在后文提及）。...订阅发布模式 还有其它实现事件委托的方法可以考虑，其中值得一提的就是发布/订阅模型。发布/订阅模型也称为了广播模型，牵涉到两个参与者。
假设我们将GreetingPeople()放在一个叫GreetingManager的类中，那么新程序应该是这个样子的： namespace Delegate { //定义委托，它定义了可以代表的方法的类型...程序一如预料地那样输出了： Morning, Jimmy Zhang 早上好, 张子阳 现在，假设我们需要使用上一节学到的知识，将多个方法绑定到同一个委托变量，该如何做呢？...让我们再次改写代码： 输出： Morning, Jimmy Zhang 早上好, Jimmy Zhang 到了这里，我们不禁想到：面向对象设计，讲究的是对象的封装，既然可以声明委托类型的变量(在上例中是...此时，轮到Event出场了，C# 中可以使用事件来专门完成这项工作，我们改写GreetingManager类，它变成了这个样子： 很容易注意到：MakeGreet 事件的声明与之前委托变量delegate1...看到这里，你差不多明白到：事件其实没什么不好理解的，声明一个事件不过类似于声明一个委托类型的变量而已。
1、面向对象：.net把委托（函数指针）定义为类型，具体的类名为委托名称，并且存在继承关系：自定义委托<--System.MulticastDelegate<--System.Delegate。 ...从上面可以看出委托实例中不仅保存了函数的地址，还保存了函数所在类的实例，相反看一下C++的函数指针只是保存函数的地址，而不管实例函数属于哪一个类。 ...事件 事件跟委托有许多相似之处，经常不知道使用哪一个，这里着重说明两者的区别。...委托对象定义为public后不仅所属类内部能调用，类外部也能调用；事件不管即使定义为public，也只能在所属类的内部触发，而类外部只能订阅不能触发事件。...总结 使用事件可以降低耦合度，事件的触发与事件的订阅分离，让感兴趣的对象订阅某个对象的全部或部分事件。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
