事件分類

鼠標事件

• click/ mousedown/ mousemove/ mouseup/ contextmenu/ mouseover/ mouseout/ mouseenter/ mouseleave
• 用button來區別鼠標的按鍵
• DOM3標準規定: click事件只能監聽左鍵, 只能通過mousedown和mouseup來判斷鼠標鍵
• 鼠標左鍵button = 0, 右鍵button = 2, 滑輪 button = 1
  eg:

var div = document.getElementsByTagName('div')[0];
div.onmousedown = function (e) {
    var event = e || window.event;
    if(event.button == 2){
        console.log('right');
    }else if(event.button == 0){
        console.log('left');
    }
}

• 如何解決mousedown和click的沖突
  應用時間差去區別, click的點擊時間快
  eg:

var div = document.getElementsByTagName('div')[0];
var key = false;
var firstTime = 0;
var lastTime = 0;
div.onclick = function() {
    if(key){
        console.log('click');
        key = false;
    }
}
div.onmousedown = function() {
    firstTime = new Date().getTime();
    console.log('mouseDown');
}
div.onmouseup = function() {
    console.log('mouseUp');
    lastTime = new Date().getTime();
    if( (lastTime - firstTime) < 200){
        key = true;
    }
}

鍵盤事件

• keydown keyup keypress
• keydown > keypress > keyup
• keydown和keypress的區別
  • keydown可以響應任意鍵盤按鍵, keypress只可以相應字符類鍵盤按鍵
  • keypress返回ascii碼, 可以轉換成相應字符串, charCode屬性記錄ascii, 并且keypress還可以記錄大小寫, 然而keydown不能, 但是keydown可以讀到所有按鍵, 例如上下左右, keydown只有which

文本操作事件

• input //當文本框輸入值時觸發事件
• focus//聚焦
• blur//失焦
• change//判斷一次聚焦失焦時文本內容是否發生變化, 變化時觸發事件

窗口操作類

• scroll//當滾動條滾動時觸發
• load//頁面加載完畢之后執行