浅谈javascript事件委托-阿里云开发者社区

开发者社区> 余二五> 正文

浅谈javascript事件委托

简介:
+关注继续查看

讲解之前先来讲讲性能.

如果一个整体页面里有大量的按钮.我们就要为每一个按钮绑定事件处理程序.这样就会影响性能了.

首先每个函数都是对象,对象就会占用很多内存.内存中的对象越多,性能就越差.

其次,dom访问次数增多,就会导致延迟加载页面.事实上,从如何来利用好事件处理程序,还是有很好的解决方案的.

一、事件委托

对事件处理程序过多的问题解决的方案就是事件委托技术.

事件委托技术利用了事件冒泡.只需指定一个事件处理程序.

我们可以为某个需要触发事件的父元素来绑定事件处理程序.

HTML代码

<div id="aa">aa</div>
    <div id="bb">bb</div>
    <div id="cc">cc</div>
    <div id="dd">dd</div>

现在的情况下 我们用dom获取当前的元素 那么要写四次 这样就会影响性能

使用事件委托,数个事件处理函数可以使用一个函数来管理。所有的单击事件被委托给一个合适的函数来处理。

采用事件委托方法如下:

 


  1. <script>  
  2.         document.onclick = function(event){  
  3.             event = event || window.event;  
  4.             var target = event.target || event.srcElement;//srcElement 针对IE  
  5.             switch(target.id){  
  6.                 case "aa" :   
  7.                 aa();  
  8.                 break;  
  9.                 case "bb" :   
  10.                 bb();  
  11.                 break;  
  12.                 case "cc" :   
  13.                 cc();  
  14.                 break;  
  15.                 case "dd" :   
  16.                 dd();  
  17.                 break;  
  18.             }     
  19.         }  
  20.           
  21.         function aa(){  
  22.             alert("aa");      
  23.         }  
  24.         function bb(){  
  25.             alert("bb");      
  26.         }  
  27.         function cc(){  
  28.             alert("cc");      
  29.         }  
  30.         function dd(){  
  31.             alert("dd");      
  32.         }  
  33.     </script>  
  34.      









本文转自 涂根华 51CTO博客,原文链接:http://blog.51cto.com/tugenhua/743120,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
4006 0
C#基础知识回顾--委托事件
在上一篇看到他我一下子就悟了(续)---委托,被人狂喷。说写的太空,没有什么内容之类的。所以准备在这里重写下,不过还是按着以前的方式尽量简单的写。这里我们以打篮球为例。 第一步:首先,其他对象订购事件        当发球的球员产生它的发球事件之前,其他球员需要订购这个事件,采用这种方式,只要出现一个发球事件,其他球 员就能够知道。
592 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
3956 0
C# 中的委托和事件==》observer
引言 委托 和 事件在 .Net Framework中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易。它们就像是一道槛儿,过了这个槛的人,觉得真是太容易了,而没有过去的人每次见到委托和事件就觉得心里别(biè)得慌,混身不自在。
503 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
5670 0
javascript练习题-事件
  前端javascript练习题-事件  键盘控制div移动如果需要在页面中移动,要将元素脱离文档流(否则会影响页面布局) js实现代码: var odiv=document.getElementsByTagName("div")[0]; document.
528 0
C#中的委托与事件
定义   委托是对函数的封装,可以当做给方法的特征制定一个名称。而事件则是委托的一种特殊形式,当发生有意义的事情时,事件对象处理通知过程。事件其实就是设计模式中观察者模式在.NET中的一种实现方式,现在还没接触,以后慢慢理解。
606 0
+关注
12613
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载