js 基礎之常用事件

在js當中，事件是較為常用的內容，本篇文章來說一些常用的事件。

滑鼠事件

下麵是常用的滑鼠事件：

• click 當用戶按下並釋放滑鼠按鍵或其他方式“激活”元素時觸發
• contextmenu 可以取消的事件，當上下文菜單即將出現時觸發。當前瀏覽器在滑鼠右擊時顯示上下文菜單
• dblclick 當用戶雙擊滑鼠時觸發
• mousedown 當用戶按下滑鼠按鍵時觸發
• mouseup 當用戶釋放滑鼠按鍵時觸發
• mousemove 當用戶移動滑鼠時觸發
• mouseover 當滑鼠進入元素時觸發。relatedTarget(在IE中是fromElement)指的是滑鼠來自的元素
• mouseout 當滑鼠離開元素時觸發。relatedTarget(在IE中是toElement)指的是滑鼠要去往的元素
• mouseenter 類似mouseover，但不冒泡。IE將其引入，HTML5將其標準化，但尚未廣泛實現
• mouseleave 類似mouseout，但不冒泡。IE將其引入，HTML5將其標準化，但尚未廣泛實現

鍵盤事件

下麵是常見的鍵盤事件,主要用來描述鍵盤行為：

• keydown
• keypress
• keyup

載入事件

很多人說到載入事件，總是會想到window.onload，但是實際上，這類事件是一大類事件，下麵是常見的載入事件：

• load 頁面完全載入後會觸發該事件
• error 當載入失敗後觸發，所有可以觸發load事件的元素，都可以觸發該事件
• abort 元素載入中止時，(如載入過程中按下ESC鍵，停止載入)，觸發該事件，常用於圖片載入 (只有IE支持)
• unload 與load事件對應的是unload事件，該事件在文檔被完全卸載後觸發。刷新頁面時，也會觸發該事件。chrome/firefox/safari瀏覽器會阻止alert等對話框，IE瀏覽器會阻止console.log()等控制台顯示。

window.onunload = function(e){
    //chrome報錯，firefox靜默失敗，IE彈出666
    alert(666);
}
// 或者
window.onunload = function(e){
    //chrome和firefox控制台顯示666，IE靜默失敗
    console.log(666);
}

• DOMContentLoaded 則在形成完整的DOM樹之後就會觸發，而不理會圖像、javascript文件、CSS文件或其他資源是否下載完畢。(IE8不支持)

window.addEventListener('DOMContentLoaded',function(e){
    console.log(1);
})

表單事件

下麵是常用的表單事件：

• submit 表單提交時觸發，綁定給form元素
• reset 表單發生重置時觸發，綁定為form元素
• blur 失去焦點時觸發
• change 表單控制的內容發生改變時觸發

其他事件

• scroll 元素內部的內容滾動時觸發
• resize 視窗尺寸發生變化時觸發

在後續的博文中會繼續更新關於常用事件的具體使用。

如果想要具體瞭解js事件的更詳細內容，可以關註https://developer.mozilla.org/zh-CN/docs/Web/Events。