概念 事件委托也叫事件代理,事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。...动态绑定: 新生dom节点如果用原来的方式是无法绑定事件的,用委托的方式这方面可以轻松实现,保证父元素存在即可。...原理 利用事件冒泡,而冒泡指的就是事件从向上传递事件,如果事件有相应的函数绑定就会执行其绑定函数。...举例:ul下的li元素有绑定事件,我们通过ul绑定委托之后,委托的源码部分会在其执行函数内针对事件源进行筛选判定是否符合筛选条件(是否是li),然后针对的获取属性或者内容,进行相关的操作。...//原生方法 window.onload = function(){ var oUl = document.getElementById("ul1"); oUl.onclick = function
一、概述 事件委托,又叫事件代理。事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。 例子:有三个同事预计会在周一收到快递。...这里其实还有2层意思: 第一,现在委托前台的同事是可以代为签收的,即程序中的现有的dom节点是有事件的; 第二,新员工也是可以被前台MM代为签收的,即程序中新添加的dom节点也是有事件的。...比如我们有100个li,每个li都有相同的click点击事件,可能我们会用for循环的方法,来遍历所有的li,然后给它们添加事件,那这么做会存在什么影响呢?...,这就是为什么性能优化的主要思想之一就是减少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中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定; 在JavaScript代码中绑定; 绑定事件监听函数。...; } 使用事件监听绑定事件 绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。下面详细介绍,事件监听。...hello1 事件委托 事件委托就是利用冒泡的原理,把事件加到父元素或祖先元素上,触发执行效果。...事件委托可以显著的提高事件的处理速度,减少内存的占用。 实例分析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...dianwo100 借助事件代理的方法:不需要再每个li项里面添加点击事件,只需要给父容器ul绑定方法即可,不管点击哪个li项,都会根据冒泡传播的传递机制,触发点击事件,执行对应的处理方法...image.png 事件委托的优点: 1.减少事件注册,节省内存。 在table上代理所有td的click事件。 在ul上代理所有li的click事件。 2.可以监听动态生成的元素。
前言 这两天一直在想如何结合实际案例来结束委托与事件的讲解,下面讲解两个事例,用来加深对委托及事件的理解。 事例一(分页功能) 本场景是用来讲解使用的,具体内容功能需自行填补实现。...用委托加事件来实现分页功能的通用。按上一节讲解中的逻辑处理,分为订阅者和发布者,一样的可以先定义订阅者感兴趣的对象,然后发布者,订阅者。再就是主程序调用。.../// /// 首先定义订阅者感兴趣的对象,本例感兴趣的是上一页下一页等方法。...public event PageActionEventHandler PageAction; //定义保护方法判断委托事件是否为空,传入参数e类型为EventArgs...很快能掌握的。 总结 委托与事件到这里就大结局了。一些列的问题也解决了。心中的疑惑也揭开了。下面我们就接着基础系列写其他的了。
事件委托 1. 基本概念 事件委托,简单的来说,就是把一个元素的响应事件的函数委托到另一个元素。...一般来讲,会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定事件的是外层元素,当事件响应到需要绑定的元素上时,会通过事件冒泡机制从而触发它的外层元素的绑定事件上,然后在外层元素上去执行函数...前面提到 DOM 中事件委托的实现是利用事件冒泡的机制,那么事件冒泡是什么呢? 2. 事件传播 事件的传播分为三个阶段:「捕获阶段」、「目标阶段」、「冒泡阶段」。...如果给每个列表项一一都绑定一个函数,那对于内存消耗是非常大的,效率上需要消耗很多性能。因此,比较好的方法就是把这个点击事件绑定到他的父层,然后在执行事件的时候再去匹配判断目标元素。...如果用了事件委托就没有这种麻烦了,因为事件是绑定在父层的,和目标元素的增减是没有关系的,执行到目标元素是在真正响应执行事件函数的过程中去匹配的。
解决方法: 利用 事件冒泡传递的机制,将本来本元素要完成的事件处理逻辑,委托给 父类节点,父类节点根据触发事件的节点信息,执行对应的事件处理逻辑。...delegate(selector,[type],[data],fn) jquery 的delegate 方法是典型的为事件委托准备的。...使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。...如果我们在js中动态地给box1 增加子元素P,相应的处理函数也会对其有效。...off() 方法移除用.on()绑定的事件处理程序。
需要事先为DOM对象指定事件处理程序,导致访问DOM的次数增多,会延迟整个页面的交互就绪时间。 事件委托 对事件处理程序过多的解决方案是使用事件委托。...事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。...通过元素id,为每个元素执行不同的if语句。 并不是所有的事件都适合使用事件委托,比较适用的事件是:mouseup、mousedown、click、keyup、keydown和keypress。...移除事件处理程序 前文已经讲过事件的添加以及事件的移除。对于页面的事件处理程序太多,会影响页面的性能,除了使用事件委托之外,还可以将一些事件移除。...我们移除页面中的元素时候,可以通过removeChild和replaceChild方法,但有时候也会使用innerHTML来替换元素。
事件委托:即是,一个事件本来是要绑定到某个元素上,然而却绑定到了该元素的父(或祖先)元素上,利用事件冒泡原理,触发执行效果。 二、事件委托的优点: 那为什么要使用事件委托?...事件委托有什么好处,以及使用时要注意什么? 事件委托大概有两个优点: 1、提高网页性能。 2、通过事件委托添加的事件,对后期生成的元素依然有效。 上面提到的第二点如何理解呢?...三、事件委托的使用方法: 使用上面 ul 的例子进行事件委托给每个 li 绑定事件,示例代码: var ul = document.querySelector("ul"); ul.onclick =...四、事件委托怎么获取元素下标(索引值): 利用数组方法indexOf查询当前li的下标: var ul = document.querySelector("ul"); ul.onclick = function...方法呢,这是因为querySelectorAll方法获取到的元素列表不是数组,和函数的arguments一样是一种类数组类型,不可以直接使用数组的方法。
在jQuery中,事件委托是一种优化事件处理的技术,它利用事件冒泡的机制,将事件处理程序绑定到一个父级元素上,从而减少事件处理函数的数量,并实现对动态添加的子元素的事件处理。什么是事件委托?...通过事件委托,我们可以避免为每个子元素都绑定事件处理程序,而是将事件处理集中在父级元素上,从而减少了事件处理函数的数量,提高了性能和代码的可维护性。为什么使用事件委托?...提高性能:由于事件委托将事件处理程序绑定到父级元素上,避免了为每个子元素都绑定事件处理程序的开销,从而提高了性能。如何使用事件委托?在jQuery中,我们可以使用on()方法结合选择器来实现事件委托。...ul>元素作为父级元素,然后使用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
它将我们从对特定元素的事件监听中释放出来,如果没有事件冒泡,我们需要监听很多不同的元素来确保捕获到想要的事件。 事件委托 事件委托是一种由其它元素而非事件目标元素来响应事件产生的行为的思想。...通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。...有多种方法来处理事件委托。标准方法来源于原生浏览器的功能。浏览器以一种特定的工作流程来处理事件,并支持事件捕获和事件冒泡。...W3C关于浏览器怎么支持事件的文档:W3C DOM Level 3 Events。一些JS库和框架公开了其它方式,如发布/订阅模型(将在后文提及)。...订阅发布模式 还有其它实现事件委托的方法可以考虑,其中值得一提的就是发布/订阅模型。发布/订阅模型也称为了广播模型,牵涉到两个参与者。
假设我们将GreetingPeople()放在一个叫GreetingManager的类中,那么新程序应该是这个样子的: namespace Delegate { //定义委托,它定义了可以代表的方法的类型...程序一如预料地那样输出了: Morning, Jimmy Zhang 早上好, 张子阳 现在,假设我们需要使用上一节学到的知识,将多个方法绑定到同一个委托变量,该如何做呢?...于是,我们改写GreetManager类,像这样: 现在,我们可以这样使用这个委托变量: 尽管这样达到了我们要的效果,但是似乎并不美气,光是第一个方法注册用“=”,第二个用“+=”就让人觉得别扭。...此时,轮到Event出场了,C# 中可以使用事件来专门完成这项工作,我们改写GreetingManager类,它变成了这个样子: 很容易注意到:MakeGreet 事件的声明与之前委托变量delegate1...看到这里,你差不多明白到:事件其实没什么不好理解的,声明一个事件不过类似于声明一个委托类型的变量而已。
前言 说起委托和事件,我就想起了再学校的时候,当时死记硬背去记什么是委托什么是事件。记得当时蝼某人问我,委托是什么?...买水的方法,这个方法参数必须加入,因为委托的构造函数参数不为空。...同时委托链(多播委托)中注意不要调用一些必须有特定顺序的方法,因为委托中调用其方法链的顺序并未正式定义。 ...,参数也是string类型的一个方法 总结 以前总在说委托与事件,都没有一次去了解熟悉它,现在得好好巩固一下了。...到这里就介绍完了委托,看上去也挺简单的。我们下一节继续看Event事件。然后结合委托一起看看委托加事件如何运用的。
当委托实例指向某个实例方法时,_target指向实例对象,_methodPtr指向实例方法的JIT STUB(如果经过了JIT编译,就直接指向实例方法的内存地址),_methodPtAux为0;当委托实例指向某个静态方法时...,_target指向委托实例本身,_methodPtr指向STUB(一小段代码,用于让CLR把_target设为null),_methodPtAux指向静态方法的内存地址。...事件 事件跟委托有许多相似之处,经常不知道使用哪一个,这里着重说明两者的区别。...委托对象定义为public后不仅所属类内部能调用,类外部也能调用;事件不管即使定义为public,也只能在所属类的内部触发,而类外部只能订阅不能触发事件。...总结 使用事件可以降低耦合度,事件的触发与事件的订阅分离,让感兴趣的对象订阅某个对象的全部或部分事件。
领取专属 10元无门槛券
手把手带您无忧上云