JavaScript HTML DOM 事件
HTML DOM 允許 JavaScript 響應 HTML 事件
響應事件
當事件發生時，JavaScript 可以執行程式碼，例如當用戶單擊 HTML 元素時。
當用戶單擊某個元素時要執行程式碼，請將 JavaScript 程式碼新增到 HTML 事件屬性中
onclick=JavaScript
HTML 事件示例
- 當用戶單擊滑鼠時
- 當網頁載入完成時
- 當影像載入完成時
- 當滑鼠移到元素上時
- 當輸入欄位更改時
- 當 HTML 表單提交時
- 當用戶按下某個按鍵時
在此示例中，當用戶單擊 <h1> 元素時，其內容將被更改
示例
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">點選此文字！</h1>
</body>
</html>
自己動手試一試 »
在此示例中，從事件處理程式呼叫了一個函式
示例
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">點選此文字！</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
自己動手試一試 »
HTML 事件屬性
要將事件分配給 HTML 元素，您可以使用事件屬性。
在上面的示例中，當單擊按鈕時，將執行一個名為 displayDate 的函式。
使用 HTML DOM 分配事件
HTML DOM 允許您使用 JavaScript 將事件分配給 HTML 元素
示例
為按鈕元素分配一個 onclick 事件
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
自己動手試一試 »
在上面的示例中，一個名為 displayDate 的函式被分配給一個 id="myBtn" 的 HTML 元素。
當按鈕被點選時，該函式將被執行。
onload 和 onunload 事件
當用戶進入或離開頁面時，會觸發 onload 和 onunload 事件。
可以使用 onload 事件來檢查訪問者的瀏覽器型別和瀏覽器版本，並根據資訊載入正確版本的網頁。
onload 和 onunload 事件可用於處理 cookie。
oninput 事件
當用戶輸入資料時，oninput 事件經常用於執行某些操作。
以下是如何使用 oninput 來更改輸入欄位內容的示例。
onchange 事件
當與輸入欄位的驗證結合使用時，onchange 事件非常有用。
以下是如何使用 onchange 的示例。upperCase() 函式將在使用者更改輸入欄位的內容時被呼叫。
onmouseover 和 onmouseout 事件
當用戶滑鼠懸停或移出 HTML 元素時，onmouseover 和 onmouseout 事件可用於觸發函式
onmousedown、onmouseup 和 onclick 事件
當滑鼠按鈕被按下時，onmousedown、onmouseup 和 onclick 事件都是滑鼠單擊的一部分。首先，當滑鼠按鈕被按下時，會觸發 onmousedown 事件；然後，當滑鼠按鈕釋放時，會觸發 onmouseup 事件；最後，當滑鼠單擊完成時，會觸發 onclick 事件。
更多示例
onmousedown 和 onmouseup
當用戶按住滑鼠按鈕時更改影像。
onload
當頁面載入完成後顯示警報框。
onfocus
當輸入欄位獲得焦點時更改其背景顏色。
滑鼠事件
當游標移到元素上時更改該元素顏色。
HTML DOM 事件物件參考
有關所有 HTML DOM 事件的列表，請參閱我們的完整 HTML DOM 事件物件參考。
