js中事件处理程序的内存优化
在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......";
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。