JavaScript的事件、DOM模型、事件流模型以及內置對象詳解（三）

JS中的事件

JS中的事件分類

　　1.鼠標事件：

　　　　click/dbclick/mouseover/mouseout

　　2.HTML事件：

　　　　onload/onunload/onsubmit/onresize/onfocus/onchange/onscroll

　　3.鍵盤事件

　　　　keydown：鍵盤按下時觸發。

　　　　keypress：鍵盤按下並彈起的瞬間觸發。只能捕獲字母，數字等符號鍵，不能捕獲功能鍵。

　　　　keyup：鍵盤擡起時出發。

　　注意：

　　　　①執行順序：keydown-->keypress-->keyup

　　　　②長按時循環執行keydown-->keypress。

　　　　③有keydown，並不必定有keyup，當長按時焦點失去，將再也不觸發keyup。

　　　　④keypress區分字母大小寫，keydown和keyup不區分。

 

　　4.事件因子

　　　　當觸發一個事件時，該事件將向事件所調用的函數中，默認傳入一個參數，這個參數就是事件因子，包含了該事件的各類詳細信息。

　　5.如何肯定鍵盤按鍵？
　　　　(1)在觸發的函數中，接收事件因子e。
　　　　(2)可使用e.key直接取到按下的按鍵字符。（不推薦）
　　　　(3)可使用keyCode/which/charCode取到案件的ASCII碼值。
　　　　　　　　寫法：var code = e.keyCode || e.which || e.charCode；

　　6.如何肯定同時按下的兩個鍵。

 

 1             var isAlt = 0 ,isEnt = 0;
 2             document.onkeydown= function(e){
 3                 if(e.keyCode==13){
 4                     isEnt=1;
 5                 }
 6                 if(e.keyCode==18){
 7                     isAlt = 1;
 8                 }
 9                 if(isAlt==1&&isEnt==1){
10                     console.log("同時按下Alt和回車");
11                 }
12                 
13             }
14             
15             
16             document.onkeyup = function(e){
17                 if(e.keyCode==13){
18                     isEnt=0;
19                 }
20                 if(e.keyCode==18){
21                     isAlt = 0;
22                 }
23             }

 

DOM0事件綁定

一、內聯模型（行內綁定）： 將函數名直接做爲HTML標籤中事件屬性的屬性值。
<button onclick="func()">內聯模型綁定</button>
缺點：不符合W3C中關於內容與行爲分離的基本規範。

二、腳本模型（動態綁定）： 經過在JS中選中某個節點，而後給節點添加onclick屬性。
<button id="bt1">腳本模型綁定</button>
document.getElementById("bt1").onclick = function(){
    alert(123);
}

優勢：符合W3C中關於內容與行爲i分離的基本規範，實現了HTML和JS的分離。
缺點：同一個節點，只能添加一次同類型事件。若是添加屢次，最後一個生效。

DOM2事件模型

一、添加DOM2事件綁定：
(1)IE8以前，使用.attachEvent("onclick",函數);
(2)IE8以後：使用.addEventListener("click",函數,true/false)。
參數3表示傳入false爲默認，表示事件冒泡，傳入true表示時間捕獲。
(3)兼容全部瀏覽器的處理方式：

 

二、DOM2的優勢
(1)同一個節點可使用DOM2綁定多個同類型事件。
(2)使用DOM2綁定的事件，能夠有專門的函數進行事件取消。

三、DMO2取消事件綁定
(1)使用.attachEvent綁定，須要使用.detachEvent取消
(2)使用addEventListener()綁定，須要使用removeEventListener()取消
注意：若是DOM2綁定的事件，須要取消，則綁定時間時，回調函數必須是函數名，而不能是匿名函數。由於取消事件時，取消傳入函數名進行取消。

JS中的事件流模型

一、事件冒泡：當觸發一個節點的事件時，會從當前節點開始，依次觸發其祖先節點的同類型事件，直到DOM根節點。

二、事件捕獲：當觸發一個節點的事件時，會從DOM根結點開始，依次觸發其祖先節點的同類型事件，直到當前節點的自身。

何時使用事件冒泡?何時事件捕獲？
①當使用addEventListener綁定事件，第三那個參數設爲true時，表示事件捕獲。
②除此以外的全部事件綁定均爲事件冒泡。

三、阻止事件冒泡：
①IE10以前，使用：e.cancelBubble = true;
②IE10以後，使用：e.stopPropagation();

四、阻止默認事件
①IE10以前，使用：e.returnValue = false;
②IE10以後，使用：e.preventDefault();

兼容寫法：

 1             //截斷事件冒泡
 2             function myParagraphEventHandler(e) {
 3                 e = e || window.event;
 4                 if (e.stopPropagation) {
 5                     e.stopPropagation(); //IE10之後
 6                 } else {
 7                     e.cancelBubble = true; //IE10以前
 8                 }
 9             }
10             
11             //阻止默認事件
12             function eventHandler(e) {
13                 e = e || window.event;
14                 // 防止默認行爲 
15                 if (e.preventDefault) {
16                     e.preventDefault(); //IE10以後 
17                 } else {
18                     e.returnValue = false; //IE10以前     
19                 }
20             }

JS中的內置對象

JS中的內置對象
1、Array -- 數組
1.JS中數組的聲明：
　　①字面量聲明，直接使用[]聲明數組。
　　var arr = [1,2,"3",true,null,undefined];
　　②常規方式，使用new關鍵字聲明。
　　var arr = new Array();
　　參數的多種狀況：
　　　　>>>不傳參數，表示建立一個長度爲0的空數組。
　　　　>>>傳入一個值，表示建立長度爲length的數組。可是JS中的數組的長度能夠隨時動態改變。
　　　　>>>傳入多個值，表示建立一個數組，並將這些值做爲數組元素。
　　在JS中，同一個數組能夠存放各類數據類型。

2.數組中元素的讀寫增刪：
　　①經過指定數組名以及索引號碼，你能夠訪問某個特定的元素。
　　②數組中元素的增刪操做：
　　　　>>>刪除數組中的元素：delete arr[1];
　　　　>>>.push()，在數組的最後增長一個元素。
　　　　>>>.pop(),刪除數組的最後一個元素。
　　　　>>>.unshift(),在數組的第一個位置增長一個元素。
　　　　>>>.shift(),刪除數組的第一個元素。

3.JS中數組的各類方法：
　　①.join()：傳入分隔符，表示用指定分隔符將數組鏈接成字符串。若是參數爲空，默認用逗號分割。
　　②.sort(),數組排序。（默認是字符的ASCII碼升序排列。）
　　　　數字升序排列：數組名.sort(function(a,b){return a-b});
　　　　數字降序排列：數組名.sort(function(a,b){return b-a});
　　③.concat()：鏈接兩個或者更多個數組，返回鏈接後的新數組，若是鏈接的數組是二維數組，則只能拆開一層。
　　　　[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]]
　　④.reverse()：將原數組的順序進行反轉。
　　⑤.slice(beginIndex，endIndex)：截取數組。
　　　　>>>傳入一個值，表示截取數組從指定位置到最後的數據。
　　　　>>>傳入兩個值，可正可負，正數表示從左往右數，從0開始，負數表示從右往左數，從-1開始。（左閉右開）
　　⑥.indexOf()/.lastIndexOf()：查找元素第一次/最後一次出現的下標。
　　⑦.forEach(function(item,index){console.log(index"--"item)})：接受一個回調函數，遍歷數組。（IE8以前不支持）
　　⑧.map()：數組映射。在回調函數中能夠有返回值，表示將返回的每個值賦給新書組。
　　　　var brr = arr.map(function(item,index,arr){
            return item;
        });

4.JS中的內置屬性

1.Boolean類：
　　聲明方式：1.字面量聲明：用typeOf檢測是Boolean類型。
　　　　　　 2.使用new關鍵字聲明：用typeOf檢測是Object類型。
若是不用new關鍵字，而直接做爲Boolean函數使用，則能夠將各類數據類型轉換成Boolean類型的變量。用typeOf檢測是Object類型。

2.Number類：
　　經常使用方法：
　　①.toFixed(參數)：將數值轉換成字符串，同時四捨五入保留指定位置的小數。
　　②.toString()：將數值轉換成字符串。
　　③.toLocaleString()：將數值按照本地格式轉換成字符串。千位分隔符：每三個數分爲一組。
　　④.valueOf()：將對象類型轉爲Number類型。

3.String類：
　　經常使用方法：
　　①.length()：反正字符串的長度
　　②.charAt()/str[index]：讀取字符串中的每一個字符。
　　③.toLowerCase()：轉換成小寫
　　④.toUpperCase()：轉換成大寫
　　⑤.substring()：截取字符串
　　⑥.indexOf()/lastIndexOf()：取下標
　　⑦.split():分割。
　　⑧.replace("",""):若是第一個參數是字符串，則只能替換掉第一個出現的字符。若是想替換多個，可使用正則表達式。

4.Date類
　　取到當前日期： var dates = new Date();
　　取到指定日期： var dates = new Date(2013-3-4 10:10:19);
　　　　getFullYear():從 Date 對象以四位數字返回年份。
　　　　getMonth():從 Date 對象返回月份 (0 ~ 11)。
　　　　getDate():返回一個月中的某一天，1-31
　　　　getHours():返回小時,1-23
　　　　getMinutes():返回分鐘,0-59
　　　　getSeconds():返回秒數，0-59
　　　　getMilliseconds():返回毫秒數,0-999
　　　　getDay():返回一週中的某一天 ,0-6,0-周天

JS中自定義對象的聲明

1.使用字面量聲明。
　　var obj = {age:14,name:"張三",func1:function(){},func2:function(){}};
2.使用new關鍵字聲明
　　var obj1 = new Object();
　　obj1.name="";
　　obj1.func=function(){};
  注意： (1)屬性和屬性值直接用冒號分割，表示鍵值對。
　　　　(2)多對屬性之間用逗號分割。
　　　　(3)對象的鍵能夠是各類數據類型（除數組和對象以外）。
　　　　(4)對象的值能夠放各類數據類型。

3.對象的屬性和方法的讀寫：
　　(1)使用.調用
　　　　在對象的外部，可使用obj.age
　　　　在對象的內部，可使用obj.age或者this.age讀寫。
　　(2)使用[key]調用：若是對象的鍵包含特殊的字符，沒法使用(1)調用時，可使用[]調用。
　　　　　　obj["age"]    obj[1]    obj["name"]
注意：在對象中，直接使用變量名默認是使用全局的變量。若是要使用對象的屬性，那麼必須用對象名或者this調用。

4.hasOwnProperty()//判斷對象中是否有當前的key;

5.delete obj.name : 刪除對象的屬性。