一、JS中的事件
（一）JS中的事件分類
1、鼠標事件
click/dblclick/onmouseover/onmouseout
2、HTML事件
onload/onscroll/onsubmit/onchange/onfocus
3、鍵盤事件
keydown： 鍵盤按下時觸發
keypress：鍵盤按下並松開的瞬間觸發
keyup： 鍵盤抬起時觸發
[注意事項]
① 執行順序：keydown->keypress->keyup
② 當長按時，會循環執行keydown->keypress
③ 有keydown並不一定有keyup，當事件觸發過程中，鼠標將光標移走，
將導致沒有keyup
④ keypress只能捕獲鍵盤上的數字、字母、符號鍵，不能捕獲各種符號鍵，
而keydown和keyup可以。
⑤ keypress支持區分大小寫，keydown和keyup並不支持。
[確定觸發的按鍵]
① 在觸發的函數中，傳入一個參數e，表示鍵盤事件；
② 使用e.keyCode，取到按鍵的Ascll碼值，進而確定觸發按鍵；
③ 所有瀏覽器的兼容寫法（一般並不需要）：
var evn = e || event;
var code = evn.keyCode || evn.which || evn.charCode;
（二）JS中的DOM0事件模型
1、內聯模型(行內綁定)：
直接將函數名作為HTML標簽的某個事件屬性的屬性值；
eg：<button onclick="func()">DOM0內聯模型</button>
優點：使用方便。
缺點：違反了w3c關於HTML與JavaScript分離的基本原則；
2、腳本模型(動態綁定)：
在JS腳本中，取到某個節點，並添加事件屬性；
優點：實現了HTML與JavaScript的分離；
缺點：同一個節點只能綁定一個同類型事件。如果綁定多個，最后一個生效。
（三）JS中的DOM2事件模型
1、添加事件綁定方式：
① IE8之前：btn2.attachEvent("onclick",函數);
② 其他瀏覽器：btn2.addEventListener("click",函數,true/false);
參數三：false(默認)：表示事件冒泡 true：表示事件捕獲
③ 兼容寫法：if (btn2.attachEvent) {
btn2.attachEvent();
}else{
btn2.addEventListener();
}
優點：① 可以給同一節點，添加多個同類型事件；
② 提供了可以取消事件綁定的函數。
2、取消DOM2事件綁定：
注意：如果要取消DOM2的事件綁定，那么在綁定事件時，處理函數必須
要使用有名函數，而不能使用匿名函數。
btn2.removeEventListener("click",func2);
btn2.detachEvent("onclick",func2);
（四）JS中的事件流
1、事件冒泡：
當某DOM元素觸發一種事件時，會從當前節點開始，逐級往上觸發其祖
先節點的同類型事件，知道DOM根節點。
>>> 什么情況下會產生事件冒泡：
① DOM0模型綁定的事件，全部都是冒泡；
② IE8之前，使用attachEvent()綁定的事件，全部都是冒泡；
③ 其他瀏覽器，使用addEventListener()添加事件，當第三個參數省略或為
alse時，為事件冒泡；
2、事件捕獲：
當某DOM元素觸發一種事件時，會從文檔根節點開始，逐級向下觸發其
祖先節點的同類型事件，直到該節點自身。
>>> 什么情況下會產生事件捕獲：
① 使用addEventListener()添加事件，當第三個參數為true時，為事件捕獲；
3、阻止事件冒泡：
在IE瀏覽器中，使用e.cancelBubble()=true;
在其他瀏覽器中，使用e.stopPropagation();
兼容所有瀏覽器的寫法：
function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation(); //IE以外
} else {
e.cancelBubble = true; //IE
}
}
4、取消事件默認行為
在IE瀏覽器中，使用e.returnValue = false;
在其他瀏覽器中，使用e.preventDefault();
兼容所有瀏覽器的寫法：
function eventHandler(e) {
e = e || window.event;
// 防止默認行為
if (e.preventDefault) {
e.preventDefault(); //IE以外
} else {
e.returnValue = false; //IE
}
}
二、JS中的內置對象
（一）JS中的數組
1、數組的基本概念？
數組是在內存空間中連續存儲的一組有序數據的集合。
元素在數組中的順序，成為下標。可以使用下標訪問數組的每個元素
2、如何聲明一個數組？
① 使用字面量聲明：var arr = [];
在JS中，同一數組，可以存儲各種數據類型。
例如：var arr=[1,"綰",true,null,func];
② 使用new關鍵字聲明：var arr = new Array(參數);
>>> 參數可以是：
a. 參數省略，表示創建一個空數組；
b. 參數為一個整數，表示聲明一個length為指定長度的數組，
但是這個length可以隨時可變可追加。
c. 參數為逗號分隔的多個數值，表示數組的多個值。
new Array(1,2,3)==[1,2,3]
3、數組中元素的讀寫/增刪
① 讀寫：通過下標訪問元素。下標從0開始 arr[1]="hahaha";
② 增刪：
a. 使用delete關鍵字，刪除數組的某一個值。刪除之后，數組的長度不變，
對應位置變為Undefined。 eg：delete arr[1];
b. arr.pop()：刪除數組的最后一個值。相當於arr.length -= 1;
c. arr.shift()：刪除數組的第一個值。
d. arr.unshift(值)：在數組的第0個位置新增一個值；
e. arr.push(值)：在數組的最后一個位置新增一個值；
f. 直接訪問數組沒達到的下標，可以動態追加。
arr[100]=1; 中間如果有空余下標，將存入Undefined。
4、數組中的其他方法：
① join("分隔符號")：將數組用指定分隔符鏈接為字符串。當參數為空時，
默認用英文逗號分隔
② concat()：【原數組不會被改變】將數組，與兩個或多個數組的值鏈接為新數組。c
oncat連接時，如果有二維數組，則至多能拆一層[]
[1,2].concat([3,4],[5,6])->[1,2,3,4,5,6]
[1,2].concat([3,4,[5,6]])->[1,2,3,4,[5,6]]
③ push() 數組最后增加一個，unshift(值) 數組開頭增加一個。-返回數組的長度；
pop() 數組最后刪除一個，shift() 數組開頭刪除一個。-返回被刪除的值
【上述方法，均會改變原數組】
④ reverse()：【原數組會改變】將數組翻轉，倒序輸出；
⑤ slice(begin,end)：【原數組不會被改變】截取數組中的某一部分，並返回
被截取的新數組將
>>> 傳入一個參數，表示開始區間，默認截到數組最后；
>>> 傳入兩個參數，表示開始和結束的下標，左閉右開區間（包含begin，不包含end
>>> 兩個參數可以為負數，表示從右邊開始數，最后一個值為-1；
⑥ sort()：【原數組被改變】將數組進行升序排列；
>>> 默認情況下，會按照每個元素首字母的ASCII值進行排序；
[3,1,5,12].sort()->[1,12,3,5];
>>> 可以傳入一個比較函數，手動指定排序的函數算法；
函數將默認接收兩個值a,b 如果返回值>0，則證明a>b；
arr.sort(function(a,b){
return a-b;//升序排列
return b-a;//降序排列
});
⑦ indexOf(value,index)：返回數組中第一個value值所在的下標，如果沒有找到返回-1
lastIndexOf(value,index)：返回數組中最后一個value值所在的下標，如果沒有找到
返回-1；
>>> 如果沒有指定index，則表示全數組查找value；
>>> 如果指定了index，則表示從index開始，向后查找value；
⑧ forEach()：專門用於循環遍歷數組。接收一個回調函數，回調函數接受兩個參數，
第一個參數為數組每一項的值，第二個參數為下標。
【IE8之前，不支持此函數】
arr.forEach(function(item,index){
console.log(item);
console.log(index);
});
⑨ map()：數組映射。使用方式與forEach()相同。不同的是，map可以有return
返回值，表示將原數組的每個值進行操作后，返回給一個新數組。
【IE8之前，不支持此函數】
var arr1=arr.map(function(item){
console.log(item);
return item+2;
});
5、二維數組與稀疏數組(了解)
① 二維數組：數組中的值，依然是一個數組形式。
eg：arr = [[1,2,3],[4,5,6]];//相當於兩行三列
讀取二維數組：arr[行號][列號];
② 稀疏數組：數組中的索引是不連續的。(length要比數組中實際的元素個數大)
6、基本數據類型&引用數據類型：
① 基本數據類型：賦值時，是將原變量中的值，賦值給另一個變量。賦值完成后，兩個
變量相互獨立，修改其中一個的值，另一個不會變化。
② 引用數據類型：賦值時，是將原變量在內存中的地址，賦值給另一個變量。賦值完成
后，兩個變量中存儲的是同一個內存地址，訪問的是同一份數據，修改其中一個的
值，另一個也會變化。
③ 數值型、字符串、布爾型等變量屬於基本數據類型；
數組，對象屬於引用數據類型
（二）內置對象
1、Boolean類
也有兩種聲明方式：
可以使用字面量方式聲明一個單純的變量。用typeof檢測為Boolean類型；
也可以使用new Boolean() 聲明一個Boolean類型的對象。用typeof檢測為Object類型
2、Number類
Number.MAX_VALUE 返回Number類可表示的最大值；
Number.MIN_VALUE 返回Number類可表示的最小值；
toString()：將數值類型轉換為字符串類型
toLocaleString()：將數值按照本地格式順序轉換為字符串，一般從右開始，
三個一組加逗號分隔；
toFixed(n)：將數字保留n位小數，並轉為字符串格式；
toPrecision(n)：將數字格式化為指定長度。n表示不含小數點的位數長度。
如果n<原數字長度，則用科學計數法表示；
如果n>原數字長度，則小數點后補0；
valueOf()：返回Number對象的基本數字值；
3、String 類
3.1、屬性：str.length 返回字符串的長度，字符數
字符串支持類似數組的下標訪問方式：str[0];
3.2、方法：
toLowerCase()：將字符串所有字符轉成小寫；
toUpperCase()：將字符串所有字符轉成大寫；
charAt(n)：截取數組的第n個字符，相當於str[n]；
indexOf("str","index")：查找字串在字符串中出現的位置，如果沒有找到返回-1；
其他同數組的indexOf方法；
lastIndexOf()：同數組
substring(begin,end)：從字符串中截取子串
>>> 傳入一個參數，表示從begin開始，到最后；
>>> 傳入兩個參數，表示從begin到end的區間，左閉右開；
split("分隔符")：將字符串以指定分隔符分隔，存入數組中。傳入空""表示將字符串
的每個字符分開放入數組；
replace("old","new")：將字符串中的第一個old替換為new；
>>> 第一個參數，可以是普通字符串，也可以是正則表達式；
>>> 如果是普通字符串，則只替換第一個old。
如果是正則表達式，則可以根據正則的寫法要求，進行替換。
4、Date 日期類
4.1、new Date()：返回當前最新時間；
new Date("2017,12,12,12:12:12")：返回指定的時間；
4.2、常用方法
getFullYear()：獲取4位年份；
getMonth()：獲取月份0-11；
getDate()：獲取一個月中的第幾天 1-31；
getDay()：獲取一周中的第幾天 0-6,0表示周天
getHours()：獲取小時
getMinutes()：獲取分鍾
getSeconds()：獲取秒
function getTime(){
var dates=new Date();
var year=dates.getFullYear();
var month=dates.getMonth();
var date1=dates.getDate();
var day=dates.getDay();
var weeks=["星期日","星期一","星期二","星期三","星期四","星期五","星期六",]
var hours=dates.getHours()<10?"0"+dates.getHours():dates.getHours();
var minutes=dates.getMinutes()<10?"0"+dates.getMinutes():dates.getMinutes();
var seconds=dates.getSeconds()<10?"0"+dates.getSeconds():dates.getSeconds();
var div1=document.getElementById("div1");
div1.innerText=year+"年"+(month+1)+"月"+date1+"日"+weeks[day]
+hours+":"+minutes+":"+seconds;
}
setInterval(getTime,1000);
window.onload=function(){
getTime();
}
（三）自定義對象
1、基本概念：
① 對象：對象是擁有一系列無序屬性和方法的集合。
② 鍵值對：對象中的數據，是以鍵值對的形式存在。對象的每個屬性和方法，都對應值得一個鍵名，以鍵取值。
③ 屬性：描述對象特征的一系列變量，稱為屬性。【對象中的變量】
④ 方法：描述對象行為的一系列函數，稱為方法。【對象中的函數】
2、對象的聲明：
① 字面量聲明： var obj = {
key1:value1,
key2:value2,
func1:function(){}
}
>>> 對象中的數據是以鍵值對形式存儲，鍵與值之間用:分隔。多個鍵之間用,分隔。
>>> 對象中的鍵，可以是除了數組/對象以外的任何數據類型。但是，一般我們只用
普通變量名作為鍵。
>>> 對象中的值，可以是任何數據類型。包括數組和對象。
② 使用new關鍵字聲明：var obj= new Object();
obj.key1=value1;
obj.key2=value2;
obj.function=function(){}
3、對象中屬性和方法的讀寫：
① .運算符：
對象內部：this.屬性 this.方法()
對象外部：對象名.屬性 對象.方法();
② 通過["key"]調用：對象名.["屬性名"] 對象名.["方法名"]();
>>> 如果鍵中包含特殊字符，則只能使用第②種方式；
>>> 對象中，直接寫變量名，默認為調用全局變量。如果需要調用對象自身的屬性或者方法。需要使用對象名.屬性，或者this.屬性。
person.age this.age 都可以，但推薦使用this關鍵字。
③ 刪除對象的屬性和方法：delete 對象.屬性名/方法名
delete person.age;