展开

关键词

事件委托

事件委托也称事件代理,在jQuery里面就称为事件委派。 事件委托就是把事件监听放在祖先元素(如父元素、爷爷元素)上。 由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理。 事件委托的原理 不是给每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利事件用冒泡的原理影响设置每个子节点 事件委托作用 绑定事件越多,浏览器内存占用越大,严重影响性能 只操作一次DOM 事件委托实现

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

前言   这两天一直在想如何结合实际案例来结束委托事件的讲解,下面讲解两个事例,用来加深对委托事件的理解。 事例一(分页功能)   本场景是用来讲解使用的,具体内容功能需自行填补实现。 用委托事件来实现分页功能的通用。按上一节讲解中的逻辑处理,分为订阅者和发布者,一样的可以先定义订阅者感兴趣的对象,然后发布者,订阅者。再就是主程序调用。 public event PageActionEventHandler PageAction; //定义保护方法判断委托事件是否为空,传入参数e类型为EventArgs ; } } } 谨记,事件基于委托,为委托提供了一种发布/订阅机制。理解发布订阅机制就会容易多了。一旦理清楚,发现好像也并不是很难的。 总结   委托事件到这里就大结局了。一些列的问题也解决了。心中的疑惑也揭开了。下面我们就接着基础系列写其他的了。   曾经,我们懵懵懂懂地看完了狮子王,知道有个勇敢坚强的小狮子叫辛巴。

25420
  • 广告
    关闭

    90+款云产品免费体验

    提供包括云服务器,云数据库在内的90+款云计算产品。打造一站式的云产品试用服务,助力开发者和企业零门槛上云。

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

    js事件委托

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

    46731

    javaScript事件委托

    事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行。 2、DOM 事件流:冒泡事件流、捕获事件流。 3、DOM 事件模型:捕获、目标、冒泡。 那什么是事件委托呢? 事件委托:即是,一个事件本来是要绑定到某个元素上,然而却绑定到了该元素的父(或祖先)元素上,利用事件冒泡原理,触发执行效果。 二、事件委托的优点: 那为什么要使用事件委托事件委托有什么好处,以及使用时要注意什么? 事件委托大概有两个优点: 1、提高网页性能。 2、通过事件委托添加的事件,对后期生成的元素依然有效。 上面提到的第二点如何理解呢? 三、事件委托的使用方法: 使用上面 ul 的例子进行事件委托给每个 li 绑定事件,示例代码: var ul = document.querySelector("ul"); ul.onclick = 注意:事件代理可能带来的隐患,当页面非常复杂的情况下,非常容易引起混乱,特别是当多种(个)事件通过事件委托绑定到同一个元素上时。

    30950

    委托事件

    1、面向对象:.net把委托(函数指针)定义为类型,具体的类名为委托名称,并且存在继承关系:自定义委托<--System.MulticastDelegate<--System.Delegate。    当委托实例指向某个实例方法时,_target指向实例对象,_methodPtr指向实例方法的JIT STUB(如果经过了JIT编译,就直接指向实例方法的内存地址),_methodPtAux为0;当委托实例指向某个静态方法时 事件                                  事件委托有许多相似之处,经常不知道使用哪一个,这里着重说明两者的区别。 委托对象定义为public后不仅所属类内部能调用,类外部也能调用;事件不管即使定义为public,也只能在所属类的内部触发,而类外部只能订阅不能触发事件。 总结                                使用事件可以降低耦合度,事件的触发与事件的订阅分离,让感兴趣的对象订阅某个对象的全部或部分事件

    28960

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

    前言   说起委托事件,我就想起了再学校的时候,当时死记硬背去记什么是委托什么是事件。记得当时蝼某人问我,委托是什么? 在这个例子中都是返回的string,都是无参数的 委托链(多播委托)   上面我们简单的介绍了下委托及其用法,这里我们可以了解一下委托链,顾名思义,委托链也就是委托连续,啥意思呢? 注意,委托链(多播委托)--委托的签名必须返回void,否则就只能得到委托调用的最后一个方法的结果。 = LouBuy.LouBuyWater;//表示返回string类型,参数也是string类型的一个方法 总结   以前总在说委托事件,都没有一次去了解熟悉它,现在得好好巩固一下了。 到这里就介绍完了委托,看上去也挺简单的。我们下一节继续看Event事件。然后结合委托一起看看委托事件如何运用的。

    34420

    事件委托和this

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

    21130

    委托事件

    现在你已经对委托有了初步了解,是时候对上面的例子做个改进了。 程序一如预料地那样输出了: Morning, Jimmy Zhang 早上好, 张子阳 现在,假设我们需要使用上一节学到的知识,将多个方法绑定到同一个委托变量,该如何做呢? 此时,轮到Event出场了,C# 中可以使用事件来专门完成这项工作,我们改写GreetingManager类,它变成了这个样子: 很容易注意到:MakeGreet 事件的声明与之前委托变量delegate1 看到这里,你差不多明白到:事件其实没什么不好理解的,声明一个事件不过类似于声明一个委托类型的变量而已。 gm.GreetPeople(“Jimmy Zhang”, gm.MakeGreet); //编译错误2 } public class GreetingManager{        //这一次我们在这里声明一个事件

    20820

    Js 事件委托事件代理)

    一、概述 事件委托,又叫事件代理。事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。 例子:有三个同事预计会在周一收到快递。 这里其实还有2层意思: 第一,现在委托前台的同事是可以代为签收的,即程序中的现有的dom节点是有事件的; 第二,新员工也是可以被前台MM代为签收的,即程序中新添加的dom节点也是有事件的。 二、为什么是使用事件委托 一般来说,dom需要有事件处理程序,我们都会直接给它设事件处理程序就好了,那如果是很多的dom需要添加事件处理呢? 三、事件委托原理 事件委托利用的是事件冒泡原理,将事件绑定到父级元素上,当点击子元素时,通过事件冒泡将事件传递到父级元素。  四、总结: 那什么样的事件可以用事件委托,什么样的事件不可以用呢? 适合用事件委托事件:click,mousedown,mouseup,keydown,keyup,keypress。

    12530

    JavaScript 事件委托 以及jQuery对事件委托的支持

    现在单独把事件委托 拿出来和大家探讨一下。 什么是委托? 所谓的委托,现实意义上讲是指将自己的事务嘱托他人代为处理。比如说甲委托乙去做某些事儿,那么,甲则是委托人,乙是被委托人。 事件委托        事件委托  允许我们不必为某些特定的节点添加事件监听器,而是将事件监听器添加到(这些节点的)某个 parent节点上。 事件监听器分析冒泡事件,去找到匹配的子节点元素,然后做出相应的事件响应。      事件委托具体是怎么工作的呢? 我们从下面的简单的例子开始,给大家展示事件委托的工作原理。 但是,事件委托也是有缺点的: 如果现在的dom 元素分为很多很多层,对于底层事件委托,有可能在事件冒泡的过程中,中途被某个节点 终止冒泡了,这样事件就传递不到上层,则委托就会失败了。 jquery 对事件委托的支持 在jQuery里对事件委托的支持,有以下几个函数: ?

    30460

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

    理解委托的一种好的方式是把委托视为是给方法的签名和返回类型指定名称。   今天我们继续来了解委托事件,现在我们来了解学习一下事件详解。 事件   事件基于委托,为委托提供了一种发布/订阅机制,在.Net中随处可见到这种事件,例如在应用程序中,Button类提供了Click事件,这类事件就是委托。    事件的命令是委托去掉后缀EventHandler     四、继承了EventArgs需以EventArgs结尾   下面我们一起来看一个简单的委托事件案例 委托事件简单实例讲解   假设现在电信公司提供一个话费流量查询的功能 发布者:     一、声明一个委托     二、基于委托声明一个事件     三、一个判断事件是否为空,然后开始执行处理事件     四、一个调用用来触发事件的方法 //先定义委托 总结   我们仔细考虑下这整个委托事件事件的本质也就是对委托的一种使用。看我们事件注册绑定和多播委托的用法是一样的,事件的声明也是使用的委托类。   大家好好想想其中的奥妙,然后理解消化下。

    22020

    委托事件模型

    事件机制: 在用户使用键盘、鼠标等设备进行操作时,实际上每一次的操作都是在发起一个事件委托事件模型: 用户通过键盘、鼠标等设备进行操纵的行为,最终都传递给了虚拟机,虚拟机接收到这些事件后的处理方案,就称之为事件模型。 就是将监听器委托到主题上,主题一旦发生变动所有的监听器都会进行响应并处理事件。 如图: ? 实现步骤: 实现步骤是先建立一个事件源对象,也就是GUI的各种组件,然后为事件源对象选择合适的监听器。 例如按钮这个对象,在按钮身上发生的最多的就是点击事件,这时就应该选择点击事件的监听器,这个事件的监听器是一个接口所以要写一个类去实现它。   : 事件基本分为两类 l 是基本事件:鼠标和键盘事件 l 是语义事件:由组件根据自身业务所定出的事件

    28220

    JavaScript-事件委托事件代理)

    今天给自己的知识结构填个坑,再复习下JS的事件代理。 事件代理可以给JS批量生成的DOM元素添加事件,并且还可以提高效率,因为你确实不用给每个DOM节点添加事件监听了。 事件的监听器,是被添加到了它们的父元素上,监听器会分析从新生成的子元素上冒泡上来的事件,并找到是哪个子元素的事件。 id="li-4">li 4

  • li 5
  • li 6
  • 那么,当每个子元素被点击的时候,会发生不同的事件 那么这时,你需要把事件监听器放在它们的父容器 ulId 上面。 这时,当子元素被点击的事件,冒泡到父元素Li上的时候,你就可以通过检查事实的target,从而获取真正被点击的节点元素的引用。 现在大部分JS都会使用jQuery等工具库来处理DOM事件,但对于事件委托的背后原理,我们还是要了解的。 浅谈数据结构 - 字典

    442100

    浅谈JavaScript的事件事件委托

    需要事先为DOM对象指定事件处理程序,导致访问DOM的次数增多,会延迟整个页面的交互就绪时间。 事件委托   对事件处理程序过多的解决方案是使用事件委托事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。 并不是所有的事件都适合使用事件委托,比较适用的事件是:mouseup、mousedown、click、keyup、keydown和keypress。 虽然mouseover和mouseout也支持事件冒泡,但是如果使用事件委托则处理就比较麻烦,而且需要计算鼠标的位置以及元素的位置(当鼠标从一个元素移到其子节点,或者移出元素都会触发mouseout事件 移除事件处理程序   前文已经讲过事件的添加以及事件的移除。对于页面的事件处理程序太多,会影响页面的性能,除了使用事件委托之外,还可以将一些事件移除。

    46470

    jquery 事件委托 - delegate()

    事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。 事件委托的写法 $(function(){ $list = $('#list'); $list.delegate('li', 'click', function() { >1

  • 2
  • 3
  • 4
  • 5
  • 这种写法是绑定#list节点,用于监听从子节点li的事件冒泡事件 因为这个最后第6个li标签是在绑定click()事件之后创建的,所以这种写法,怎么点击第6个li标签都不会触发click()事件。 改写使用事件委托的方式,则第6个li标签可以触发click事件 ? 采用父节点#list使用事件委托的方法,可以绑定新增的click()节点事件。因为这个是利用事件冒泡的原来来实现的。

    1.1K20

    JavaScript事件对象与事件委托

    事件对象 包含事件相关的信息,如鼠标、时间、触发的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

    41650

    弄懂事件委托

    事件委托,也叫事件委派,事件代理。 当构建应用程序时,有时需要将事件监听器绑定到页面上的某些元素上,以便在用户与元素交互时执行某些操作。

  • Make dinner
  • Code for one hour
  • 我们需要在
  • 上绑定点击事件 这个函数将会创建10,000个独立的事件监听器,并将每个事件监听器绑定到 DOM 。这样代码执行的效率非常低下。 更高效的解决方案是将一个事件侦听器实际绑定到父容器
  • 事件委托与阻止冒泡

    简单说下事件委托与阻止冒泡 html:

    C# 事件委托

    14 t.Boiled += new BoiledEventHandler(new Monitor().Display);//在监视对象(热水器)中为观察者(显示器)实例方法事件的注册 15 t.BoilingWater();//Heater类实例对Boiled事件的触发,以便更新观察者(显示器)中的数据 16 Console.ReadKey (); 17 } 18 } 19 20 class BoiledEventArgs : EventArgs //事件类,存储观察者对监视对象(热水器)所感兴趣的字段(如 } 27 } 28 delegate void BoiledEventHandler(object sender,BoiledEventArgs e); //定义一个委托 感兴趣的字段:温度 32 public string Brand = "Midea"; 33 public event BoiledEventHandler Boiled;//事件委托

    31300

    扫码关注腾讯云开发者

    领取腾讯云代金券