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......";

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

js中事件处理程序的内存优化相关推荐

后处理程序文件大小的变量_【每日一题】(17题)面试官问：JS中事件流，事件处理程序，事件对象的理解？...
关注「松宝写代码」,精选好文,每日一题作者:saucxs | songEagle 2020,实「鼠」不易 2021,「牛」转乾坤风劲潮涌当扬帆,任重道远须奋蹄! 一.前言 2020.12.23 立 ...
[js] 举例说明js中什么是尾调用优化
[js] 举例说明js中什么是尾调用优化写在前面上次介绍了什么是尾调用以及怎么准确快速的判别一个函数调用是否为尾调用.那么,我们判别尾调用的意义是什么呢?做什么事情总归有个目的,那么今天我们就来系 ...
js中事件捕获和事件冒泡
全栈工程师开发手册 (作者:栾鹏) js系列教程8-事件操作全解 js中事件捕获和事件冒泡其实不仅在js中,在面向对象的编程语言中或多或少涉及到这个问题.js编程的事件全解,你可以到我的主页,这里给 ...
JS中事件的绑定和解绑
JS中事件的绑定和解绑一. 了解事件 1. 事件的三要素 2. 事件绑定分类 2-1. dem0级事件 2-2. dom2级事件二. 事件的绑定 1. dom0级事件 2. dom2级事件 ...
Android中对图片的内存优化方法
Android 中对于图片的内存优化方法 1. 对图片本身进行操作尽量不要使用 setImageBitmap.setImageResource.BitmapFactory.decodeResourc ...
js中事件绑定的几种方式
事件处理程序即给元素绑定事件的方式有下列几种:HTML事件处理程序.DOM0级事件处理程序.DOM2级事件处理程序.IE事件处理程序.跨浏览器事件处理程序.其实这些方式就是一个逐步优化和实现跨浏览器的 ...
Node.js中事件的循环
Node.js 事件循环 Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. Node.js 的每一个 API 都是异步的,并作为一个独立线程运行,使用异步函数调用, ...
js中事件对象event
一.Event对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 当一个事件发生的时候, ...
js中事件绑定3种方法以及事件委托
###事件绑定首先,我先来介绍我们平时绑定事件的三种方法. 1.嵌入dom <button onclick="open()">按钮</button>< ...
js中事件加载完成之前添加蒙版
在js中,一般测试的时候会出现,连续几次点击一个事件,这时可能会出现多次加载,所以需要一个蒙版来控制, 实现机制是:点击一次之后,数据加载完全之前不允许点击,并且多次点击时无反应: 不多说,直接上代码 ...

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

js中事件处理程序的内存优化相关推荐

最新文章

热门文章