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事件綁定
1、內聯模型(行內綁定): 將函數名直接作為HTML標簽中事件屬性的屬性值。
<button onclick="func()">內聯模型綁定</button>
缺點:不符合W3C中關於內容與行為分離的基本規範。
2、腳本模型(動態綁定): 通過在JS中選中某個節點,然後給節點添加onclick屬性。
<button id="bt1">腳本模型綁定</button>
document.getElementById("bt1").onclick = function(){
alert(123);
}
優點:符合W3C中關於內容與行為i分離的基本規範,實現了HTML和JS的分離。
缺點:同一個節點,只能添加一次同類型事件。如果添加多次,最後一個生效。
DOM2事件模型
1、添加DOM2事件綁定:
(1)IE8之前,使用.attachEvent("onclick",函數);
(2)IE8之後:使用.addEventListener("click",函數,true/false)。
參數3表示傳入false為默認,表示事件冒泡,傳入true表示時間捕獲。
(3)兼容所有瀏覽器的處理方式:
2、DOM2的優點
(1)同一個節點可以使用DOM2綁定多個同類型事件。
(2)使用DOM2綁定的事件,可以有專門的函數進行事件取消。
3、DMO2取消事件綁定
(1)使用.attachEvent綁定,需要使用.detachEvent取消
(2)使用addEventListener()綁定,需要使用removeEventListener()取消
註意:如果DOM2綁定的事件,需要取消,則綁定時間時,回調函數必須是函數名,而不能是匿名函數。因為取消事件時,取消傳入函數名進行取消。
JS中的事件流模型
1、事件冒泡:當觸發一個節點的事件時,會從當前節點開始,依次觸發其祖先節點的同類型事件,直到DOM根節點。
2、事件捕獲:當觸發一個節點的事件時,會從DOM根結點開始,依次觸發其祖先節點的同類型事件,直到當前節點的自身。
什麽時候使用事件冒泡?什麽時候事件捕獲?
①當使用addEventListener綁定事件,第三那個參數設為true時,表示事件捕獲。
②除此之外的所有事件綁定均為事件冒泡。
3、阻止事件冒泡:
①IE10之前,使用:e.cancelBubble = true;
②IE10之後,使用:e.stopPropagation();
4、阻止默認事件
①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中的內置對象
一、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 : 刪除對象的屬性。
JavaScript的事件、DOM模型、事件流模型以及內置對象詳解(三)