JavaScript 事件对内存和性能的影响

Posted 乔克叔叔

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>
View Code

 

参考文章:http://www.codeceo.com/article/javascript-event-optimization.html

对以上的练习  做如下补充:

一:

火狐控制台打印:

 

二:JavaScript里面三个等号和两个等号的区别

参考文章: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 事件对内存和性能的影响的主要内容,如果未能解决你的问题,请参考以下文章

ReduceTask工作机制

Hadoop基础(二十四):ReduceTask工作机制

搞清楚时序与频率的区别了吗?哪个对内存性能影响大?

Linux01

Android 高性能音频Oboe 音频流打开后 耳机 / 音箱 插拔事件处理 ( 设置 Oboe 音频设备 ID | setDeviceId 函数原型 | AudioStream 音频流 )(代码片

浅谈JavaScript的事件(事件委托)