JS事件細分

鼠標相關事件執行順序

與 onmousedown 事件相關連得事件發生次序（ 鼠標左側/中間 按鈕）：

1. onmousedown
2. onmouseup
3. onclick

與 onmousedown 事件相關連得事件發生次序 (鼠標右側按鈕):

1. onmousedown
2. onmouseup
3. oncontextmenu

區別拖拽和點擊

經過鼠標按鍵間隔來區分

var firstTime = 0;
var lastTime = 0;
var key = false;
document.mousedown = function(){
    firstTime = new Date().getTime();
    drap...;//執行拖拽
}

document.onmouseup = funciton(){
    lastTime = new Date().getTime();
    if(lastTime - firstTime < 300){
        key = true;
    }
}
document.onclick = function(){
    if(key){
        console.log('click');
        key = false;
    }
}

mousedown&mouseup與click的小差異

mousedown和mouseup的event對象能夠經過button屬性區分鼠標左中右鍵。而click沒法區分右鍵，由於右鍵沒法觸發click事件。

鍵盤相關事件執行順序

與 onkeydown 事件相關聯的事件觸發次序:

1. onkeydown
2. onkeypress
3. onkeyup

keydown和keypress的小區別

• keydown能夠響應任意鍵盤按鍵，keypress只能夠響應字符類鍵盤按鍵。

• keypress返回ASCII碼，能夠轉換爲相應字符。

若是監聽字符類按鍵而且要區分大小寫，用keypress

document.onkeypress = function(){
    console.log(String.fromCharCode(e.charCode));
}

若是操做類按鍵就用keydown

oninput和onchange

oninput經過內容變化來觸發

onchange經過聚焦和失焦兩個狀態下input的value值是否有差異來觸發。