HTML-事件(Event)的總結
阿新 • • 發佈：2019-02-08
HTML 與 JavaScript 的互動是通過事件來處理的，當用戶或瀏覽器操縱頁面時。事件就會發生。
使用事件來執行 JavaScript 編碼的響應
每個HTML元素有一定的事件可以觸發 JavaScript 程式碼
比如： 載入頁面、點選按鈕、關閉視窗
介紹幾個常見的事件型別
onclick 事件型別
這是最常用的事件型別，當用戶點選滑鼠左按鈕。你可以把你的驗證、警告等反對這個事件型別。
支援該事件的 HTML 標籤：
<a>, <address>, <area>, <b>, <bdo> 支援該事件的 JavaScript 物件：
button, document, checkbox, link, radio, reset, submit
具體例項
<script>
function sayHello() {
alert("Hello World")
}
</script>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>onmouseover/onmouseout
nmouseover: 事件發生時,當你把你的滑鼠在任何元素上時， onmouseover 事件發生
onmouseout: 當你把滑鼠從該元素移開時，onmouseout 事件發生
支援該事件的 HTML 標籤：
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>,
<caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>,
<form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>,
<li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>,
<sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>,
<tr>, <tt>, <ul>, <var>
支援該事件的 JavaScript 物件：
layer, link
<html>
<head>
<script>
function mouseOver()
{
alert("on mouse over")
}
</script>
</head>
<body>
<img src="/i/eg_mouse2.jpg" onmouseover="mouseOver()" />
</body>
</html>HTML 4 標準事件
執行以下指令碼顯示一個Javascript函式。
| 事件 | 型別 | 何時執行Javascript函式 |
|---|---|---|
| onchange | script | 當元素改變時 |
| onsubmit | script | 確認按鈕被點選時 |
| onreset | script | 當表單被重置時 |
| onselect | script | 當元素被選中時 |
| onblur | script | 當元素失去焦點時 |
| onfocus | script | 當元素成為焦點時 |
| onkeydown | script | 某個鍵盤按鍵被按下時 |
| onkeypress | script | 某個鍵盤按鍵被按下並鬆開時 |
| onkeyup | script | 某個鍵盤按鍵被鬆開時 |
| onclick | script | 當滑鼠單擊時 |
| ondblclick | script | 當滑鼠雙擊時 |
| onmousedown | script | 滑鼠按鈕被按下時 |
| onmousemove | script | 滑鼠被移動時 |
| onmouseout | script | 滑鼠從某元素移開時 |
| onmouseover | script | 滑鼠移到某元素之上時 |
| onmouseup | script | 滑鼠按鍵被鬆開時 |