前言
在上一篇文章中有跟大家介紹過何謂DOM/BOM，那麼這篇文章會為大家介紹DOM事件的一些基礎知識。
何謂DOM事件
當使用者在瀏覽網頁時，會觸發很多事件，像是點擊滑鼠、鍵盤、或是在網路上下載圖片等等行為都可以稱為是一種事件，而JavaScript使用DOM Event去定義這些事件的型態，並且處理這些事件。
JavaScript程式語言一直以來對瀏覽器中的物件模型(object model)與其事件模型，有非常高的支援性，雖然DOM標準從來就不是只專門制定給JavaScript單一種語言使用的，不過因為JavaScript的使用群太高了，現在也差不多就是制定給它用的。
那麼，什麼樣的DOM元素中會對應什麼樣的DOM事件，或是什麼樣的操作方式會觸發怎麼樣的事件？
這都由DOM中的標準來制定，例如像這個DOM事件列表非常的長，從滑鼠、鍵盤輸入到HTML表單…等等，近年來由於觸碰式的行動裝置很流行，W3C也開始制定觸碰事件(Touch Events)的標準。
內文簡介有些部分來自：https://en.wikipedia.org/wiki/DOM_events
DOM Event事件名稱整理
- blur：物件失去焦點時
- change：物件內容改變時
- click：滑鼠點擊物件時
- dblclick：滑鼠連點二下物件時
- error：當圖片或文件下載產生錯誤時
- focus：當物件被點擊或取得焦點時
- keydown：按下鍵盤按鍵時
- keypress：按下並放開鍵盤按鍵後
- keyup：按下並放開鍵盤按鍵時
- load：網頁或圖片完成下載時
- mousedown：按下滑鼠按鍵時
- mousemove：介於over跟out間的滑鼠移動行為
- mouseout：滑鼠離開某物件四周時
- mouseover：鼠離開某物件四周時
- mouseup：放開滑鼠按鍵時
- resize：當視窗或框架大小被改變時
- scroll：當捲軸被拉動時
- select：當文字被選取時
- submit：當按下送出按紐時
- beforeunload：當使用者關閉 (或離開) 網頁之前
- unload：當使用者關閉 (或離開) 網頁之後
接下來我們要介紹在 HTML 的事件相關屬性上綁定事件處理函式，屬性的名稱是「on + 事件名稱」，屬性值則是任何的 JavaScript。以下這個例子，當使用者點選按鈕後，會跳出hello。
<html>
<head>
<title>traditional event handling example</title>
</head>
<body> <button id="foo">click me</button> <script>
function triggerAlert() {
alert('hello');
}
var ele = document.getElementById('foo');
// 當使用者按下 (click) 按鈕時，執行 triggerAlert 函數
ele.onclick = triggerAlert;
</script>
</body>
</html>再來舉幾個滿常見的事件處理範例。
onclick event
// 當使用者用滑鼠點擊螢幕 (或用手點擊觸控螢幕) 時
document.body.addEventListener('click', function(event) { // 把字體改成黃色
event.target.style.color = 'yellow';
});onkeydown event
// 當使用者在網頁中按下鍵盤按鍵時
document.onkeydown = function(event) { if (event.keyCode === 89 && event.ctrlKey) {
alert('你同時按下 "control + y"');
} else if (event.which === 90 && event.ctrlKey ){
alert('你同時按下 "control + z"');
}
};onbeforeunload event
// 當使用者要離開或關閉目前頁面時
window.onbeforeunload = function(event) { // 返回要顯示給使用者看的提醒文字
return '你確定要離開本頁面嗎？';
};結語
以上是有關於JavaScript DOM Event的基礎介紹，希望可以幫助閱讀這篇文章的人能從中學習進步，當然還有很多更深入的內容，在本篇文章並未提到，如果想要對JavaScript更系統化的瞭解，Udemy這裡開課囉！老師從基礎手把手的帶你，教你主流寫法提升 JS 開發能力！
如果你的入門還在單打獨鬥，歡迎來到快樂學程式找到志同道合的夥伴，你的自學之路不孤單。
