您好,登录后才能下订单哦!
事件代理(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)尽可能去限制一个页面中的事件处理程序的数量,数量太多会占用大量的内存,而且也会让用户感觉页面不够灵敏。进而尽量去使用事件委托技术,可以有效地减少事件处理程序的数量
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。