首页
学习
活动
专区
工具
TVP
发布

js事件委托

概念 事件委托也叫事件代理,事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。...动态绑定: 新生dom节点如果用原来的方式是无法绑定事件的,用委托的方式这方面可以轻松实现,保证父元素存在即可。...原理 利用事件冒泡,而冒泡指的就是事件从向上传递事件,如果事件有相应的函数绑定就会执行其绑定函数。...举例:ul下的li元素有绑定事件,我们通过ul绑定委托之后,委托的源码部分会在其执行函数内针对事件源进行筛选判定是否符合筛选条件(是否是li),然后针对的获取属性或者内容,进行相关的操作。...//原生方法 window.onload = function(){   var oUl = document.getElementById("ul1");   oUl.onclick = function

3.2K31

Js 事件委托事件代理)

一、概述 事件委托,又叫事件代理。事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。 例子:有三个同事预计会在周一收到快递。...二、为什么是使用事件委托 一般来说,dom需要有事件处理程序,我们都会直接给它设事件处理程序就好了,那如果是很多的dom需要添加事件处理呢?...比如我们有100个li,每个li都有相同的click点击事件,可能我们会用for循环的方法,来遍历所有的li,然后给它们添加事件,那这么做会存在什么影响呢?...,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能; 每个函数都是一个对象...三、事件委托原理 事件委托利用的是事件冒泡原理,将事件绑定到父级元素上,当点击子元素时,通过事件冒泡将事件传递到父级元素。  四、总结: 那什么样的事件可以用事件委托,什么样的事件不可以用呢?

11.2K30
您找到你想要的搜索结果了吗?
是的
没有找到

js事件委托的理解 转

今日看下拉列表时用到事件委托,特意在网上搜查了一些资料, 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

98220

JS 事件绑定、事件监听、事件委托详细介绍 转

在JavaScript中,有三种常用的绑定事件方法: 在DOM元素中直接绑定; 在JavaScript代码中绑定; 绑定事件监听函数。...; } 使用事件监听绑定事件 绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。下面详细介绍,事件监听。...hello1 事件委托 事件委托就是利用冒泡的原理,把事件加到父元素或祖先元素上,触发执行效果。...事件委托优点 1、提高JavaScript性能。事件委托可以显著的提高事件的处理速度,减少内存的占用。 实例分析JavaScript中的事件委托事件绑定 ,这篇文章写得还不错。...说明事件委托可以为新添加的DOM元素动态的添加事件

8.7K31

JS篇(007)-事件委托是什么

答案:利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行! 解析: 1、那什么样的事件可以用事件委托,什么样的事件不可以用呢?...- 适合用事件委托事件:click,mousedown,mouseup,keydown,keyup,keypress。...- 不适合的就有很多了,举个例子,mousemove,每次都要计算它的位置,非常不好把控,在不如说 focus,blur 之类的,本身就没用冒泡的特性,自然就不用事件委托了。...2、为什么要用事件委托 - 1.提高性能 苹果 香蕉 凤梨 // good document.querySelector...3、事件冒泡与事件委托的对比 - 事件冒泡:box 内部无论是什么元素,点击后都会触发 box 的点击事件 - 事件委托:可以对 box 内部的元素进行筛选 4、事件委托怎么取索引?

1.6K10

事件委托

事件委托也称事件代理,在jQuery里面就称为事件委派。 事件委托就是把事件监听放在祖先元素(如父元素、爷爷元素)上。...由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理。...事件委托的原理 不是给每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利事件用冒泡的原理影响设置每个子节点 事件委托作用 绑定事件越多,浏览器内存占用越大,严重影响性能 只操作一次DOM...dianwo100 借助事件代理的方法:不需要再每个li项里面添加点击事件,只需要给父容器ul绑定方法即可,不管点击哪个li项,都会根据冒泡传播的传递机制,触发点击事件,执行对应的处理方法...image.png 事件委托的优点: 1.减少事件注册,节省内存。 在table上代理所有td的click事件。 在ul上代理所有li的click事件。 2.可以监听动态生成的元素。

84720

事件委托

事件委托 1. 基本概念 事件委托,简单的来说,就是把一个元素的响应事件的函数委托到另一个元素。...前面提到 DOM 中事件委托的实现是利用事件冒泡的机制,那么事件冒泡是什么呢? 2. 事件传播 事件的传播分为三个阶段:「捕获阶段」、「目标阶段」、「冒泡阶段」。...事件委托的好处 减少内存消耗 试想一下,如果我们有一个列表,列表之中有大量的列表项,我们需要在点击列表项的时候响应一个事件。...因此,比较好的方法就是把这个点击事件绑定到他的父层,然后在执行事件的时候再去匹配判断目标元素。所以事件委托可以减少大量的内存消耗,节约效率。...如果用了事件委托就没有这种麻烦了,因为事件是绑定在父层的,和目标元素的增减是没有关系的,执行到目标元素是在真正响应执行事件函数的过程中去匹配的。

82720

委托事件-委托事件案例(三)

前言   这两天一直在想如何结合实际案例来结束委托事件的讲解,下面讲解两个事例,用来加深对委托事件的理解。 事例一(分页功能)   本场景是用来讲解使用的,具体内容功能需自行填补实现。...用委托事件来实现分页功能的通用。按上一节讲解中的逻辑处理,分为订阅者和发布者,一样的可以先定义订阅者感兴趣的对象,然后发布者,订阅者。再就是主程序调用。.../// /// 首先定义订阅者感兴趣的对象,本例感兴趣的是上一页下一页等方法。...public event PageActionEventHandler PageAction; //定义保护方法判断委托事件是否为空,传入参数e类型为EventArgs...; } } } 谨记,事件基于委托,为委托提供了一种发布/订阅机制。理解发布订阅机制就会容易多了。一旦理清楚,发现好像也并不是很难的。

82920

javaScript事件委托

事件委托:即是,一个事件本来是要绑定到某个元素上,然而却绑定到了该元素的父(或祖先)元素上,利用事件冒泡原理,触发执行效果。 二、事件委托的优点: 那为什么要使用事件委托?...举个例子:现在页面上有个 ul,ul 里有三个 li,通过循环给每个 li 添加点击事件,发现三个 li 到可以正常触发点击事件了,然后通过 js 代码在 ul 里插入(append)两个 li, 再试着点击所有...三、事件委托的使用方法: 使用上面 ul 的例子进行事件委托给每个 li 绑定事件,示例代码: var ul = document.querySelector("ul"); ul.onclick =...四、事件委托怎么获取元素下标(索引值): 利用数组方法indexOf查询当前li的下标: var ul = document.querySelector("ul"); ul.onclick = function...,这是因为querySelectorAll方法获取到的元素列表不是数组,和函数的arguments一样是一种类数组类型,不可以直接使用数组的方法

1K50

jQuery事件委托

在jQuery中,事件委托是一种优化事件处理的技术,它利用事件冒泡的机制,将事件处理程序绑定到一个父级元素上,从而减少事件处理函数的数量,并实现对动态添加的子元素的事件处理。什么是事件委托?...通过事件委托,我们可以避免为每个子元素都绑定事件处理程序,而是将事件处理集中在父级元素上,从而减少了事件处理函数的数量,提高了性能和代码的可维护性。为什么使用事件委托?...提高性能:由于事件委托事件处理程序绑定到父级元素上,避免了为每个子元素都绑定事件处理程序的开销,从而提高了性能。如何使用事件委托?在jQuery中,我们可以使用on()方法结合选择器来实现事件委托。...click", "li", function() { console.log($(this).text());});在上述示例中,我们选择了id为myList的元素作为父级元素,然后使用on()方法绑定了一个点击事件处理程序...事件委托的优点和适用场景事件委托有以下优点:减少事件处理函数的数量,提高代码的可维护性和性能。可以处理动态添加的元素,无需手动重新绑定事件处理程序。可以统一管理事件处理程序,使代码更加简洁和易于维护。

1K10

委托事件-委托详解(一)

前言   说起委托事件,我就想起了再学校的时候,当时死记硬背去记什么是委托什么是事件。记得当时蝼某人问我,委托是什么?...,先去买水然后顺带买了辣条,委托链(多播委托)可以使用+=来增加委托中调用的方法,同理也可使用-=来删除委托中调用的方法.   ...同时委托链(多播委托)中注意不要调用一些必须有特定顺序的方法,因为委托中调用其方法链的顺序并未正式定义。   ...= LouBuy.LouBuyWater;//表示返回string类型,参数也是string类型的一个方法 总结   以前总在说委托事件,都没有一次去了解熟悉它,现在得好好巩固一下了。...到这里就介绍完了委托,看上去也挺简单的。我们下一节继续看Event事件。然后结合委托一起看看委托事件如何运用的。

1.1K20

委托事件

委托实例指向某个实例方法时,_target指向实例对象,_methodPtr指向实例方法的JIT STUB(如果经过了JIT编译,就直接指向实例方法的内存地址),_methodPtAux为0;当委托实例指向某个静态方法时...,_target指向委托实例本身,_methodPtr指向STUB(一小段代码,用于让CLR把_target设为null),_methodPtAux指向静态方法的内存地址。...事件                                  事件委托有许多相似之处,经常不知道使用哪一个,这里着重说明两者的区别。...委托对象定义为public后不仅所属类内部能调用,类外部也能调用;事件不管即使定义为public,也只能在所属类的内部触发,而类外部只能订阅不能触发事件。...总结                                使用事件可以降低耦合度,事件的触发与事件的订阅分离,让感兴趣的对象订阅某个对象的全部或部分事件

83260

事件委托和this

它将我们从对特定元素的事件监听中释放出来,如果没有事件冒泡,我们需要监听很多不同的元素来确保捕获到想要的事件事件委托 事件委托是一种由其它元素而非事件目标元素来响应事件产生的行为的思想。...通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。...有多种方法来处理事件委托。标准方法来源于原生浏览器的功能。浏览器以一种特定的工作流程来处理事件,并支持事件捕获和事件冒泡。...W3C关于浏览器怎么支持事件的文档:W3C DOM Level 3 Events。一些JS库和框架公开了其它方式,如发布/订阅模型(将在后文提及)。...订阅发布模式   还有其它实现事件委托方法可以考虑,其中值得一提的就是发布/订阅模型。发布/订阅模型也称为了广播模型,牵涉到两个参与者。

77530

委托事件

假设我们将GreetingPeople()放在一个叫GreetingManager的类中,那么新程序应该是这个样子的: namespace Delegate {        //定义委托,它定义了可以代表的方法的类型...程序一如预料地那样输出了: Morning, Jimmy Zhang 早上好, 张子阳 现在,假设我们需要使用上一节学到的知识,将多个方法绑定到同一个委托变量,该如何做呢?...于是,我们改写GreetManager类,像这样: 现在,我们可以这样使用这个委托变量: 尽管这样达到了我们要的效果,但是似乎并不美气,光是第一个方法注册用“=”,第二个用“+=”就让人觉得别扭。...此时,轮到Event出场了,C# 中可以使用事件来专门完成这项工作,我们改写GreetingManager类,它变成了这个样子: 很容易注意到:MakeGreet 事件的声明与之前委托变量delegate1...看到这里,你差不多明白到:事件其实没什么不好理解的,声明一个事件不过类似于声明一个委托类型的变量而已。

62620

委托事件模型

委托事件模型: 用户通过键盘、鼠标等设备进行操纵的行为,最终都传递给了虚拟机,虚拟机接收到这些事件后的处理方案,就称之为事件模型。...就是将监听器委托到主题上,主题一旦发生变动所有的监听器都会进行响应并处理事件。 如图: ? 实现步骤: 实现步骤是先建立一个事件源对象,也就是GUI的各种组件,然后为事件源对象选择合适的监听器。...接着为监听器添加进行响应事件后的处理代码,最后为监听器与事件源建立联系,也就是将实现好的监听器构建出对象后,使用事件源对象也就是组件对象来访问addActionListener这个方法并将监听器添加进去...将监听器类对象构建出来后,使用这个对象访问添加事件对象方法并添加一个事件对象: ? 运行效果: ? 点击按钮监听器响应后执行相应的代码,就会产生自动打开网页的效果: ?...常用的方法: addFocusListener(FocusListener f); 焦点 addKeyListener(KeyListener k);  键盘 addMouseListener(MouseListener

83520
领券