JavaScript 事件對內存和性能的影響
阿新 • • 發佈：2017-12-27
img child use val 是否 otc als 字符串轉換 oot 
程序代碼：
<%-- 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-8View Code" 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
對以上的練習 做如下補充：
一：
火狐控制臺打印：
二：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 事件對內存和性能的影響