JavaScript DOM 事件是為了為網頁添加交互響應而存在的。無論是改變文本、樣式還是其他元素屬性，都需要事件的配合來完成交互效果。下面我們通過多個實例來介紹JavaScript DOM 事件相關知識點。
在使用JavaScript DOM 事件之前，我們需要先了解瀏覽器事件類型。常見的瀏覽器事件類型有：click（單擊）、mouseover（鼠標移入）、mouseout（鼠標移出）、keydown（鍵盤按下）、keyup（鍵盤抬起）等。其中，click事件是最常見的，常用于按鈕點擊事件，如下。
<!DOCTYPE html>
<html>
<head>
<title>click事件示例</title>
<script>
function showMessage() {
alert("Hello world!");
}
</script>
</head>
<body>
<input type="button" value="點擊我" onclick="showMessage()" />
</body>
</html>以上的代碼演示了一個單擊事件，使得按鈕被單擊時彈出"Hello world!"的提示框。
除了click事件外，mouseover和mouseout事件也非常常用，如下。
<!DOCTYPE html>
<html>
<head>
<title>mouseover事件示例</title>
<style>
#message {
display: none;
position: absolute;
left: 50%;
top: 50%;
background: #fff;
padding: 10px;
border: 1px solid #ccc;
}
</style>
<script>
function showTip() {
var message = document.getElementById("message");
message.style.display = "block";
}
function hideTip() {
var message = document.getElementById("message");
message.style.display = "none";
}
</script>
</head>
<body>
<div onmouseover="showTip()" onmouseout="hideTip()">
<p>鼠標移上來</p>
<div id="message">
<p>這是一個浮動提示框</p>
</div>
</div>
</body>
</html>以上代碼演示了一個鼠標移入和移出的效果，當鼠標移入時會出現一個懸浮提示框，鼠標移出時則隱藏該提示框。
除了以上介紹的幾個事件外，還有其他事件也非常常見。比如，window.onload事件、form.onsubmit事件等等。在使用事件時，我們需要注意幾個細節：
- 可以通過事件綁定屬性來注冊事件，比如在HTML中使用on*屬性。但是更好的做法是在JavaScript中來注冊事件，因為這樣的代碼可讀性更好，而且也不需要擔心多個事件之間的覆蓋問題。
- 在事件中，event對象會被自動傳入，我們可以通過event對象來獲取事件的類型、目標對象等等信息。
- 事件的冒泡和捕獲過程：事件從子節點向父節點冒泡，或者從父節點向子節點捕獲。可以通過stopPropagation()方法來阻止事件的繼續傳遞。
總之，JavaScript DOM事件是網頁交互效果的基礎之一，了解事件類別和常用API，能夠大大提升網頁交互效果開發的效率。