什麼是DOM事件？

事件就是當觸發這個事件之後會執行一段程式碼
使用 on 來繫結一個事件
比如：<div onclick="hj()"></div>

常見事件：
1.當滑鼠點選某個元素時/或者移動到當前元素上時
2.頁面載入時
3.改變輸入欄位時
4.當HTML表單被提交時
5.當用戶觸發鍵盤上的某個按鍵時

當按鈕被點選時改變body的背景顏色

//這裡可以運用在給使用者自己選擇當前瀏覽的網頁的背景顏色
<input type="button" onclick="document.body.style.backgroundColor='lavender';" /> 
//
 
所觸發的事件可以先宣告好，需要使用的時候直接用函式名呼叫

<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()" />

1.HTML 事件屬性

如果想給一個HTML元素分配一個事件有兩種方法：

1.可以直接在HTML的屬性中宣告
比如：
<button onclick="displayDate()">西門吹雪</button> //宣告的一個點選事件

2.通過DOM來宣告
比如：
 
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
//    找到這個元素的 id名，繫結一個點選事件
</script>

常用的事件：

1.onload事件 和 onunload事件 //用於監聽使用者進入或離開網頁

onload事件可用於檢查訪問者的瀏覽器的型別和版本，以便於相對應的載入不同版本的網頁，提高使用者體驗

2.onchange 事件

onchange 事件常用於輸入欄位的驗證
就是當你在輸入框中輸入資料，回車之後會觸發的事件    

3.onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件用於在滑鼠移動到當前或離開元素時觸發編寫好的函式

比如：
滑鼠移進DIV內容區域的時候顯示歡迎光臨，離開後顯示謝謝惠顧

 
<div onmouseover="mOver(this)" onmouseout="mOut(this)">熊削鐵如泥</div>

<script>
function mOver(obj)
{    
obj.innerHTML="歡迎光臨"
}

function mOut(obj)
{
obj.innerHTML="謝謝惠顧"
}
</script>

4.onmousedown、onmouseup 以及 onclick 事件
//onmousedown、onmouseup 以及 onclick 事件是滑鼠點選的全部過程
//1.元素被點選的一瞬間，觸發 onmousedown 事件
//2.當元素被鬆開的一瞬間，觸發 onmouseup 事件
//3.滑鼠點選完成時，觸發 onclick 事件。