JS事件 之内存与性能
- 有必要限制一个页面中事件处理程序的数量,数量太多会导致大量内存,而且也会让用户更加页面反应不够灵敏。
- 建立在事件冒泡机制之上的事件委托技术,可以有效减少事件处理程序的数量。
<div id="box">
<input type="button" id="add" value="添加" />
<input type="button" id="remove" value="删除" />
<input type="button" id="move" value="移动" />
<input type="button" id="select" value="选择" />
</div>
<script>
window.onload = function(){
var Add = document.getElementById("add");
var Remove = document.getElementById("remove");
var Move = document.getElementById("move");
var Select = document.getElementById("select"); Add.onclick = function(){
alert('添加');
};
Remove.onclick = function(){
alert('删除');
};
Move.onclick = function(){
alert('移动');
};
Select.onclick = function(){
alert('选择');
} }
</script>- 核心:利用冒泡原理,将事件绑定到父元素,减少内存消耗,提升性能;利用event属性找到事件源,将事件定位到具体元素上。
- 建议在浏览器卸载页面之前移除页面中的所有事件处理程序。
var btn=document.getElementById("btn");
EventUtil.addHandler(btn,"click",function(){
btn.onclick=null;
document.getElementById("div").innerHTML="processing...";
});解决方法: 手动移除
JS事件 之内存与性能的更多相关文章
- JavaScript 事件对内存和性能的影响
程序代码: <%-- Created by IntelliJ IDEA. User: 乔克叔叔 Date: 2017/12/26 Time: 16:45 To change this templ ...
- JavaScript 中的内存和性能、模拟事件(读书笔记思维导图)
由于事件处理程序可以为现代 Web 应用程序提供交互能力,因此许多开发人员会不分青红皂白地向页面中添加大量的处理程序.在 JavaScript 中,添加到页面上的事件处理程序数量将直接关系到页面的整体 ...
- js事件冒泡和事件委托
js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix" data-type=&q ...
- js事件流机制冒泡和捕获
JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流 从页面中接收事件的顺序称为事件流. IE --> 事件冒泡流 Netsc ...
- 深入浅出js事件
深入浅出js事件 一.事件流 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念是为了解决页面中事件流(事件发生顺序)的问题. <div id="outer"> & ...
- JS事件流、DOM事件流、IE事件处理、跨浏览器事件处理、事件对象与类型
事件的移除 removeEventListener() 第二个参数需要指定要移除的事件句柄,不能是匿名函数,因为无法识别 想要移除成功,那么三个参数必须跟addEventListener中的三个完全一 ...
- 一文梳理JS事件
JavaScript与HTML的交互是通过事件进行的.事件,就是文档或浏览器窗口发生的一些特定的交互瞬间. 事件流 事件捕获 事件冒泡 事件处理程序 事件委托 1. 事件流 如果单机页面上的某个按钮, ...
- Node.js精进(10)——性能监控(下)
本节会重点分析内存和进程奔溃,并且会给出相应的监控方法. 本系列所有的示例源码都已上传至Github,点击此处获取. 一.内存 虽然在 Node.js 中并不需要手动的对内存进行分配和销毁,但是在开发 ...
- js事件浅析
js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...
随机推荐
- TCollector
TCollector tcollector is a client-side process that gathers data from local collectors and pushes th ...
- 【S2-052】漏洞复现(CVE-2017-9805)
一.漏洞描述 Struts2 的REST插件,如果带有XStream组件,那么在进行反序列化XML请求时,存在未对数据内容进行有效验证的安全隐患,可能发生远程命令执行. 二.受影响版本 Struts2 ...
- 想使用Docker容器?先看看这些注意事项
Docker容器无疑是最近十年来最引人注目的技术之一,因为有了它,对我们思考设计.开发和运维软件的方式产生了非常有益的影响. 但是就像每一个开发工具一样,为了充分利用这些工具,需要注意一些使用中问题, ...
- CSS实现盒子高度撑开且以最高的为高
前端开发中,常常会有需求两个盒子并排排列,高度以最高的为准,且高度是内容撑开的,类似于这样 如果不是用 table 布局,而是用 div 布局,两个子盒子浮动来实现的话,实际上默认写出来是这样的 此时 ...
- ERP中文档权限设置:只能浏览不能下载?如何实现
文档中心的文件夹授权只能是对岗位或者用户授权(这个跟我们的[[url=]用户及权限[/url]]下面的授权方式还不太一样)比如:要将文档中心的文件夹[公司文档]授权给用户A和用户B 授权逻辑: 软件界 ...
- Unity3D手机斗地主游戏开发实战(04)_出牌判断大小(已完结)
之前我们实现了叫地主.玩家和电脑自动出牌主要功能,但是还有个问题,出牌的时候,没有有效性检查和比较牌力大小.比如说,出牌3,4,5,目前是可以出牌的,然后下家可以出任何牌如3,6,9. 问题1:出牌检 ...
- Java爬虫实践--爬取CSDN网站图片为例
实现的效果,自动在工程下创建Pictures文件夹,根据网站URL爬取图片,层层获取.在Pictures下以网站的层级URL命名文件夹,用来装该层URL下的图片.同时将文件名,路径,URL插入数据库, ...
- HDU 2686 Matrix 多线程dp
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2686 思路:多线程dp,参考51Nod 1084:http://www.51nod.com/onlin ...
- JavaSE初步学习笔记
PS:个人用来随时记录学习的过程,格式比较混乱,仅供个人参考与复习知识点 Dos命令行,课程中常见的命令 Dir:列出当前目录下包含的文件 Md:在当前目录下创建文件 Rd:在当前目录下删除指定文件夹 ...
- 五十个小技巧提高PHP执行效率(二)
更详细具体的总结如下: 1.用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量, 单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的 ...