控件中国网现已改版,您看到的是老版本网站的镜像,系统正在为您跳转到新网站首页,请稍候.......
中国最专业的商业控件资讯网产品咨询电话:023-67870900 023-67871946
产品咨询EMAIL:SALES@COMPONENTCN.COM

js中事件处理程序的内存优化

作者:未知 出处:cnblog 2014年02月13日 阅读:

在web设计中,为每个按钮都添加一个onclick事件已经是一件司空见惯的事情了。但是,每个函数都是一个对象,都会占用一定的内存,内存中的对象越多,性能就越差。因此,从如何利用事件处理程序的角度出发,还是有一些方法能够提升性能的。

例如给下面这个html元素添加事件处理:

1     <ul id="myLinks">
2         <li id="goSomewhere">Go somewhere</li>
3         <li id="doSomething">Do something</li>
4         <li id="say">say hi</li>
5     </ul>
      这个事件希望我们点击Go somewhere的时候跳转到一个页面去,点击Do something的时候改变窗口的title,而点击say hi的时候弹出一个对话框。 对于这样的情况,我们怎么去处理呢?也许我们可能写出出这样的代码:


 1     var item1 = document.getElementById("goSomewhere");
 2     var item2 = document.getElementById("doSomething");
 3     var item3 = document.getElementById("say");
 4
 5     item1.addEventListener("click",function(event){
 6         location.href = "www.flyknows.com";
 7     },false);
 8
 9     item2.addEventListener("click",function(event){
10         document.title="hello";
11     },false);
12
13     item3.addEventListener("click",function(event){
14         alert("hi");
15     },false);

     如果所有可以单击的按钮都采用这样的一种方式,那么将会有数不清的代码用于添加事件处理程序,且性能非常的差。其实我们可以采用事件委托的方式来处理这个问题:


 1 var link = document.getElementById("myLinks");
 2     link.addEventListener("click",function(event){
 3         var target = event.target;
 4
 5         switch(target.id){
 6             case "goSomewhere":
 7                 location.href = "www.flyknows.com";
 8                 break;
 9             case "doSomething":
10                 document.title="hello";
11                 break;
12             case "say":
13                 alert("hi");
14                 break;
15         }
16
17     },false);

     这段代码只对ul元素添加了一个click的事件处理,当我们点击li的时候,事件会冒泡,最终会触发这个事件。通过检测id属性从而进行相应的操作。因此我们需要绑定事件处理程序的时候,尽量可以绑定到较高层次的元素上。

     要将某个绑定了事件处理程序的元素移除时,最好先移除其事件处理程序,否则会占用内存,极有可能无法被当做垃圾回收。例如:

1 btn.onclick = null;
2 document.getElementById("myDiv").innerHTML = "Processing......";

热推产品

  • ActiveReport... 强大的.NET报表设计、浏览、打印、转换控件,可以同时用于WindowsForms谀坔攀戀Forms平台下......
  • AnyChart AnyChart使你可以创建出绚丽的交互式的Flash和HTML5的图表和仪表控件。可以用于仪表盘的创......
首页 | 新闻中心 | 产品中心 | 技术文档 | 友情连接 | 关于磐岩 | 技术支持中心 | 联系我们 | 帮助中心 Copyright-2006 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 电话:023 - 67870900 传真:023 - 67870270 产品咨询:sales@componentcn.com 渝ICP备12000264号 法律顾问:元炳律师事务所 重庆市江北区塔坪36号维丰创意绿苑A座28-5 邮编:400020
在线客服
在线客服系统
在线客服
在线客服系统