js中事件处理程序的内存优化-白红宇

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

阅读量：4921 次

发布时间：2019-06-11

本文共 1733 字，大约阅读时间需要 5 分钟。

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

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

1     
     
      2         
      Go somewhere
3         
      Do something
4         
      say hi
5

这个事件希望我们点击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......";

转载于:https://www.cnblogs.com/luoxiao-wang/p/3546342.html

你可能感兴趣的文章