JS學習五(js中的事件)

標籤：方便   分類   false   move   bsp   動態   keycode   大小   else   

[JS中的事件分類]
1、滑鼠事件
click/bdlclick/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並不支援

document.onkeydown = function(){
　　console.log("onkeydown");
}
document.onkeypress = function(){
　　console.log("onkeypress");
}
document.onkeyup = function(){
　　console.log("onkeyup");
}

[確定觸發的按鍵]
①在觸發的函數中，傳入一個參數e，表示鍵盤事件
②使用e.keyCode，取到按鍵的ASCII碼值，進而確定觸發按鍵；
③所有瀏覽器的相容寫法(一般並不需要):
var evn = e || event;
var code = evn.keyCode || evn.which || evn.charCode;

[判斷組合按鍵的方式]
var isEnt = false,isAlt = false;
document.onkeydown = function(e){
if(e.keyCode == 13) isEnt = true;
if(e.keyCode == 18) isAlt = true;

if(isEnt == true && isAlt == true){
console.log("您按了Alt+斷行符號鍵");
}
}
document.onkeyup = function(e){
if(e.keyCode == 13) isEnt = false;
if(e.keyCode == 18) isAlt = false;
}

 

 

[js中的DOM0事件模型]
1、內聯模型(行內綁定):直接將函數名作為HTML標籤的某個事件屬性的屬性值;
eg:<button onclick="func()">DOM0內聯模型</button>
優點:使用方便。
缺點:違反了w3c關於HTML與JavaScript分離的基本原則;

2、指令碼模型(動態綁定):在JS指令碼中，取到某個節點,並添加事件屬性;
eg:window.onload = function(){}
優點:實現了HTML與JavaScript分離。
缺點:同一個節點只能綁定一個同類型事件。如果綁定多次,最後一個生效。


[DOM2事件模型]
1、添加事件綁定方式:
①在IE8之前:btn.attachEvent("click",函數);
②其他瀏覽器:btn.addEventListener("click",函數，true/false);

參數三:false(預設)表示事件冒泡
true 表示事件捕獲
③相容寫法:if(btn2.attachEvent){
btn2.attachEvent();
}else{
btn2.addEventListener();
}
2、優點:①可以給同一節點，添加多個同類型事件;
②提供了可以取消事件綁定的函數;

3、取消DOM2事件綁定:
注意:如果要取消DOM2的事件綁定,那麼在綁定事件時，處理函數必須要使用有名函數,而不能使用匿名函數。
btn2.removeEventListener("click",func2);
btn2.detachEvent("onclick",func2);

 

 

【js中的事件流】
1、事件冒泡：當某DOM元素觸發一種事件時，會從當前結點開始，逐級往上觸發其祖先節點的同類型事件，
直到DOM根節點；
什麼情況下會產生事件冒泡？
① DOM0模型繫結事件，全部都是冒泡；
② IE8之前，使用attachEvent()綁定的事件，全部都是冒泡；
③ 其他瀏覽器，使用 addEventListener 添加的事件，當第三個參數省略或者為false時，為事件冒泡。

2、事件捕獲：當某DOM元素觸發一種事件時，會從文檔節點開始，逐級向下chufa其祖先節點的同類事件，直到該節點自身；

什麼情況下會觸發事件捕獲？
① 使用 addEventListener 添加事件，當第三個參數為true時，為事件捕獲；

↓DOM根節點 ↑
↓ ↑
捕 爺爺節點 冒
↓ ↑
獲 父節點 泡
↓ ↑
↓ 當前節點 ↑
3、 阻止事件冒泡
在IE瀏覽器中使用：e.cancelBubble = true;
在其他瀏覽器中使用：e.stopPropagation();
相容其它瀏覽器使用：
function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation(); //IE以外
} else {
e.cancelBubble = true; //IE8之前
}
}
☆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中的事件)