JavaScript 12. 事件
文章目錄
- JavaScript 12. 事件
- 1. 簡介
- 2. 常見的HTML事件
- 3. JavaScript 可以做什麼?
1. 簡介
HTML 事件可以是浏覽器行為，也可以是使用者行為。
以下是 HTML 事件的執行個體：
- HTML 頁面完成加載
- HTML input 字段改變時
- HTML 按鈕被點選
通常，當事件發生時，你可以做些事情。
在事件觸發時 JavaScript 可以執行一些代碼。
HTML 元素中可以添加事件屬性，使用 JavaScript 代碼來添加 HTML 元素。
<button onclick="getElementById('demo').innerHTML=Date()">現在的時間是?</button> 執行個體：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<button onclick="getElementById('demo').innerHTML=Date()">現在的時間是?</button>
<p id="demo"></p>
</body>
</html> 輸出：
執行個體2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<button onclick="this.innerHTML=Date()">現在的時間是?</button>
</body>
</html> 輸出：
執行個體3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>點選按鈕執行 <em>displayDate()</em> 函數.</p>
<button onclick="displayDate()">點這裡</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html> 輸出：
2. 常見的HTML事件
| 事件 | 描述 |
| onchange | HTML 元素改變 |
| onclick | 使用者點選 HTML 元素 |
| onmouseover | 滑鼠指針移動到指定的元素上時發生 |
| onmouseout | 使用者從一個 HTML 元素上移開滑鼠時發生 |
| onkeydown | 使用者按下鍵盤按鍵 |
| onload | 浏覽器已完成頁面的加載 |
3. JavaScript 可以做什麼?
事件可以用于處理表單驗證，使用者輸入，使用者行為及浏覽器動作:
- 頁面加載時觸發事件
- 頁面關閉時觸發事件
- 使用者點選按鈕執行動作
- 驗證使用者輸入内容的合法性
- HTML 事件屬性可以直接執行 JavaScript 代碼
- HTML 事件屬性可以調用 JavaScript 函數
- 你可以為 HTML 元素指定自己的事件處理程式
- 你可以阻止事件的發生。