事件代理学习与总结

事件代理(Event Delegation),又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。很容易理解这个名称,“事件代理”即是把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务。
     事件代理的用处是?对于Javascript,添加到页面的事件程序数量会直接关系到页面的整体运行性能,在javascript中每个函数都是对象,都会在内存中占用一定的空间,对象越多性能就越差,还有,DOM操作是十分消耗性能的,添加多个事件就会增多DOM的访问次数,所以会延迟整个页面的交互就绪事件。而事件代理的核心思想,就是通过尽量少的绑定,去监听尽量多的事件。从而达到,从一方面提升性能。

事件代理核心是:事件冒泡以及目标元素。

最适合采用事件委托技术的事件有:click,mousedown.mouseup,keydown,keyup,和keypress.

举例:建立这样一个表格,对每一行中的每一列元素,要求点击后弹出对应的值,为每行添加一个类TR,每列添加一个类为TD,效果图如下:

    

window.onload=function(){   	    
	     //没有使用事件代理,为16个td分别添加点击事件  
	     var TDObjs=document.getElementsByClassName(‘TD‘);//通过类名选出每一行中的每一列
	     for(var i=0;i<TDObjs.length;i++){
	     	 EventUtil.addHandler(TDObjs[i],"click",function(event){//通过for循环为每一行中的每一列添加click事件(注册16个点击事件)
	     	     event=event||window.event;
	       	      var target=EventUtil.getElement(event);
	     	      alert(target.innerText);
	     	 	});
	     }
	     //使用事件委托来解决上面为每一个td项增加事件,而改变为每一行tr添加事件,只需要添加4个点击事件,就可以达到上面的效果	  
	     var TRObjs=document.getElementsByClassName(‘TR‘);//获得表格的行对象
	     for(var i=0;i<TRObjs.length;i++){
	     	//对每一行添加事件程序,进而操作里面的每一个td列(注册4个点击事件)
	     	  EventUtil.addHandler(TRObjs[i],"click",function(event){
	     	 event=event||window.event;
	       	 var target=EventUtil.getElement(event);
	       	 //通过switch语句分别对每一行中的每一列就行操作
	       	 switch(target.id){
	       	 	case "td1":
                alert(target.innerText);              
	       	    break;
	       	    case "td2":
	       	    alert(target.innerText);
	       	    break;
	       	     case "td3":
	       	    alert(target.innerText);
	       	    break;
	       	      case "td4":
	       	    alert(target.innerText);
	       	    break;
	       	    case "td5":
	       	    alert(target.innerText);
	       	    break;

                    等等..对列进行的操作
	       	 	   
	       	 }
	       	    });
	     }
	   
	       	    
	       	 	

总结:

将每一个td上的事件,改到它的父元素上tr上进行注册监听,避免了大量的注册监听事件,可以稍微提高性能,

这个表格事件委托中,有一个问题:在往上级,用table注册事件函数,但tr,td无法响应,这个在后期的学习中会留意其真正原理。总之,事件委托还是很好的一项技术,利用这样的思想,在使用事件时,

(1)尽可能去限制一个页面中的事件处理程序的数量,数量太多会占用大量的内存,而且也会让用户感觉页面不够灵敏。进而尽量去使用事件委托技术,可以有效地减少事件处理程序的数量

时间: 2024-10-17 19:52:06

事件代理学习与总结的相关文章

js学习笔记-事件代理

通过事件代理,你可以把事件处理器绑定到父元素上,避免了把事件处理器添加到多个子级元素上.从而优化性能. 事件代理用到了事件冒泡和目标元素.而任何一个元素的目标元素都是一开始的那个元素. 这里首先要注意event的target与currentTarget的区别. target:表示触发事件的元素.currentTarget:表示事件绑定的元素. 只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件

js学习总结----事件委托和事件代理

1.什么是事件委托/事件代理 利用事件的冒泡传播机制(触发当前元素的某一个行为,它父级所有元素的相关行为都会被触发),如果一个容器中有很多元素都要绑定点击事件,我们没有必要一个个的绑定了,只需要给最外层容器绑定一个点击事件即可,在这个方法执行的时候,通过事件源的区分来进行不同的操作. 具体小案例如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&

事件代理和委托学习

参考资料: 又被事件冒泡坑了一把,这次要彻底弄懂浏览器的事件流 JavaScript事件代理和委托 事件委托: 实际案例:我们平时在开发时,有这种情况,一个ul里有有好多个li子元素,这个li的数量可以是固定的,也可以是动态添加删除的,而且每个li都必要有一个点击事件, <ul class= 'list'> <li class='item1'>item1</li> <li class='item2'>item2</li> <li class

事件代理那些事

简单说说. 事件代理,顾名思义,就是把本应该是自己的事情来交给别人来帮你做,比如,你要卖房,你不可能一天到晚蹲在马路边见人就问要不要买房吧,这样不仅消耗能量,还效率低,在javascript中也是,如果需要绑定事件的元素多了,你如果为每一个都绑个事件的话,你受的了,浏览器也受不了,搞不好它就崩溃了,你就尴尬了,所以把事件代理到元素的父级上是个好方法. 怎么搞? 要了解它是怎么搞起的,首先要知道背后的秘密,事件代理的秘密很简单,那就是事件冒泡,事件冒泡大家肯定都知道,比如当你单击了一个元素,这个单

JavaScript事件代理入门

事件代理(Event Delegation),又称之为事件委托.是 JavaScript 中常用绑定事件的常用技巧. 顾名思义,"事件代理"即是把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务. 为什么要这样做呢? 众所周知,DOM操作是十分消耗性能的.所以重复的事件绑定简直是性能杀手.而事件代理的核心思想,就是通过尽量少的绑定,去监听尽量多的事件. 下面将会用 Zepto 为大家演示怎么实现事件代理. 啊?Zepto是什么? Zepto is a minimalist J

关于JavaScript中的事件代理

今天面试某家公司Web前端开发岗位,前面的问题回答的都还算凑活,并且又问了一下昨天面试时做的一道数组去重问题的解题思路(关于数组去重问题,可以观赏我前几天写的:http://www.cnblogs.com/craftsman-gao/p/4766223.html.幸好前几天专门看过这个问题,答题时才能轻松应对啊),因为这些以前都有过研究,所以回答起来并没有太大困难.然而,最后面试官又出了一道代码题让我涨姿势了.题目本身很简单:一个ul中有一千个li,如何给这一千个li绑定一个鼠标点击事件,当鼠标

浅谈事件代理

1.什么是事件代理 意思:代理.委托.事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数. 2.运用场景 当子元素被频繁添加或者删除时,给子元素绑定事件,需要在每次添加或者删除时重新绑定,这就造成了非常不方便,那么此时此刻:事件代理,能帮你轻松解决这个麻烦的问题. 3.下面是我实现的一个简单的事件代理方法 1 /** 2 * 事件处理对象 3 * @type {{addHandler: addHa

封装Js事件代理方法

// 封装事件代理 function delegateEvent(element, tag, event, listener) { // 判断是否支持addEventlistener if(element.addEventListener){ // 给父元素添加事件 element.addEventListener(event,function(e){ // 获取当前触发的元素 var target = e.target; // 判断当前元素是否是我需要的 if(target.nodeName.

JavaScript事件代理和事件委托

一.概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的各位大牛们讲事件委托基本上都用了同一个例子,就是取快递来解释这个现象,我仔细揣摩了一下,这个例子还真是恰当,我就不去想别的例子来解释了,借花献佛,我摘过来,大家认真领会一下事件委托到底是一个什么原理: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台