JavaScript 事件对内存和性能的影响
程序代码：
<%--
Created by IntelliJ IDEA.
User: 乔克叔叔
Date: 2017/12/26
Time: 16:45
To change this template use File | Settings | File Templates.
--%>
<!--测试事件绑定 JavaScript 事件对内存和性能的影响-->
<!--event.target 属性返回哪个 DOM 元素触发了事件。-->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
$(function () {
// 方法一
var list1=document.getElementById("list-1");
list1.addEventListener("click",function () {
alert(this.firstChild.nodeValue);
});
var list2=document.getElementById("list-2");
list2.addEventListener("click",function () {
alert(this.firstChild.nodeValue);
});
var list3=document.getElementById("list-3");
list3.addEventListener("click",function () {
alert(this.firstChild.nodeValue);
});
var list4=document.getElementById("list-4");
list4.addEventListener("click",function () {
alert(this.firstChild.nodeValue);
});
var list5=document.getElementById("list-5");
list5.addEventListener("click",function () {
alert(this.firstChild.nodeValue);
}); //方法二
var parent=document.getElementById("parent-listB");
parent.addEventListener("click",function (event) { var target=event.target;
console.log(target);//target就是被点击的目标 的所有内容
//console.log(target.nodeName);//LI
//console.log(target.nodeValue);//null
//console.log(target.nodeType);//1
if(target.nodeName.toLowerCase()=="li"){//toLowerCase()转为小写 判断是否点中了li
//如果点中了li 那么就把该目标li的文本弹出
alert(target.firstChild.nodeValue);
} });
//第三种 使用switch语句
var p=document.getElementById("parent-listC");
p.addEventListener("click",function (event) {
var target= event.target;
if(target.nodeName.toLowerCase()==="li"){
switch (target.id){
case "a":
alert("我是A");
break;
case "b":
alert("我是B");
break;
case "c":
alert("我是C");
break;
case "d":
alert("我是D");
break;
default:
break;
}
} });
//移除事件处理程序
var but=document.getElementById("but");
but.addEventListener("click",function (event) {
var target=event.target;
//alert(target.nodeName); //button
//alert(target.nodeValue);//null
//alert(target.nodeType);//1
alert("触发事件，记得把时间移除哦");
but.onclick=null;//移除事件处理程序
but.firstChild.nodeValue="提交中。。。"
}) })
</script>
</head>
<body>
<ul id="parent-listA">
<li id="list-1">List 1</li>
<li id="list-2">List 2</li>
<li id="list-3">List 3</li>
<li id="list-4">List 4</li>
<li id="list-5">List 5</li>
</ul>
------------------------------------------
<ul id="parent-listB">
<li id="list-a">List a</li>
<li id="list-b">List b</li>
<li id="list-c">List c</li>
<li id="list-d">List d</li>
<li id="list-e">List e</li>
</ul>
------------------------------------------
<ul id="parent-listC">
<li id="a">List a</li>
<li id="b">List b</li>
<li id="c">List c</li>
<li id="d">List d</li>
</ul>
----------------------------
<br>
<button id="but">提交</button>
</body>
</html>
参考文章：http://www.codeceo.com/article/javascript-event-optimization.html
对以上的练习 做如下补充：
一：
火狐控制台打印：
参考文章：https://www.cnblogs.com/litsword/archive/2010/07/22/1782933.html
先说 ===，这个比较简单。下面的规则用来判断两个值是否===相等：
1、如果类型不同，就[不相等]
2、如果两个都是数值，并且是同一个值，那么[相等]；(！例外)的是，如果其中至少一个是NaN，那么[不相等]。（判断一个值是否是NaN，只能用isNaN()来判断）
3、如果两个都是字符串，每个位置的字符都一样，那么[相等]；否则[不相等]。
4、如果两个值都是true，或者都是false，那么[相等]。
5、如果两个值都引用同一个对象或函数，那么[相等]；否则[不相等]。
6、如果两个值都是null，或者都是undefined，那么[相等]。
再说 ==，根据以下规则：
1、如果两个值类型相同，进行 === 比较。
2、如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较：
a、如果一个是null、一个是undefined，那么[相等]。
b、如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。
c、如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。
JavaScript 事件对内存和性能的影响的更多相关文章
- JavaScript 中的内存和性能、模拟事件（读书笔记思维导图）
由于事件处理程序可以为现代 Web 应用程序提供交互能力,因此许多开发人员会不分青红皂白地向页面中添加大量的处理程序.在 JavaScript 中,添加到页面上的事件处理程序数量将直接关系到页面的整体 ...
- JS事件 之内存与性能
有必要限制一个页面中事件处理程序的数量,数量太多会导致大量内存,而且也会让用户更加页面反应不够灵敏. 建立在事件冒泡机制之上的事件委托技术,可以有效减少事件处理程序的数量. <div id=&q ...
- javaScript事件机制深入学习(事件冒泡，事件捕获，事件绑定方式，移除事件方式，阻止浏览器默认行为，事件委托，模拟浏览器事件，自定义事件)
前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...
- Javascript高级编程学习笔记（70）—— 事件（14）内存和性能
由于事件处理程序是现代的web程序交互能力的提供者 所以在日常实践中,我们免不了要向页面中添加大量的事件处理程序(不管是用于用户交互还是用于统计用户数据) 在创建GUI(图形用户界面)的语言(如C#) ...
- Java中创建的对象多了，必然影响内存和性能
1, Java中创建的对象多了,必然影响内存和性能,所以对象的创建越少越好,最后还要记得销毁.
- 深入理解JavaScript 事件
本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加了各种例子及解析. 如无特殊说明,本 ...
- JavaScript事件总结
JavaScript 事件总结 本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加 ...
- JavaScript 事件总结
本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加了各种例子及解析. 如无特殊说明,本 ...
- JavaScript事件 DOMNodeInserted DOMNodeRemoved
JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定交互的瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码. 13.1 事件流 ...
随机推荐
- APP漏洞自动化扫描专业评测报告（上篇）
一.前言 随着Android操作系统的快速发展,运行于Android之上的APP如雨后春笋般涌现.由于一些APP的开发者只注重APP业务功能的实现,对APP可能出现安全问题不够重视,使得APP存在较多 ...
- Storm集群组件和编程模型
Storm工作原理: Storm是一个开源的分布式实时计算系统,常被称为流式计算框架.什么是流式计算呢?通俗来讲,流式计算顾名思义:数据流源源不断的来,一边来,一边计算结果,再进入下一个流. 比 ...
- DNS 隐蔽通道工具资料汇总
http://www.cnblogs.com/bonelee/p/7651746.html DNS隧道和工具 内含dns2tcp.iodine.dnscat2工具的简单使用说明 iodine工具的使用 ...
- NET中的池
NET中的各种池 在.NET中,常用到的池有四个:字符串拘留池.线程池 .应用程序池.数据库连接池. 字符串拘留池 在.NET中字符串是不可变对象,修改字符串变量的值会产生新的对象.为降低性能消耗及减 ...
- Reorder List 最典型的linkedlist题目
https://oj.leetcode.com/problems/reorder-list/ Given a singly linked list L: L0→L1→…→Ln-1→Ln,reorder ...
- H3C交换机DHCP Server配置的六个方面
H3C交换机DHCP Server配置的六个方面 在交换机上面配置DHCP内容是司空见惯的了.那么这里我们就讲解一下H3C交换机DHCP Server配置内容.之后的文章中,我们还对针对其他方面的配置 ...
- java+appium+安卓模拟器实现app自动化Demo
网上有比较多相关教程,自己写一遍,加深下印象. 环境搭建 据说,很多人都被繁琐的环境搭建给吓到了. 是的,确实,繁琐. node.js 网址 cmd输入node -v,出现下图说明成功. JDK 网址 ...
- CentOS6.5下nginx-1.8.1.tar.gz的单节点搭建（图文详解）
不多说,直接上干货! [hadoop@djt002 local]$ su root Password: [root@djt002 local]# ll total drwxr-xr-x. root r ...
- 派遣函数IRP
派遣函数是Windows驱动程序中的重要概念.驱动程序的主要功能是负责处理I/O请求,其中大部分I/O请求是在派遣函数中处理的. 用户模式下所有对驱动程序的I/O请求,全部由操作系统转换为一个叫做IR ...
- ACM-ICPC北京赛区[2017-11-19]
Domains K-Dimensional Foil Graph Chinese Checkers Cats and Fish #include<stdio.h> #include< ...