HTML DOM 事件
HTML DOM 允許JavaScript 對HTML 事件作出反應。
實例
對事件作出反應
當事件發生時,可以執行JavaScript,比如當用戶點擊一個HTML 元素時。
如需在用戶點擊某個元素時執行代碼,請把JavaScript 代碼添加到HTML 事件屬性中:
HTML 事件的例子:
- 當用戶點擊鼠標時
- 當網頁已加載時
- 當圖片已加載時
- 當鼠標移動到元素上時
- 當輸入字段被改變時
- 當HTML 表單被提交時
- 當用戶觸發按鍵時
在本例中,當用戶點擊時,會改變<h1> 元素的內容:
實例
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
嘗試一下»
在本例中,會從事件處理程序中調用函數:
實例
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>
嘗試一下»
HTML 事件屬性
如需向HTML 元素分配事件,您可以使用事件屬性。
在上面的例子中,當點擊按鈕時,會執行名為displayDate 的函數。
使用HTML DOM 來分配事件
HTML DOM 允許您使用JavaScript 向HTML 元素分配事件:
實例
為button 元素分配onclick 事件:
document.getElementById("myBtn"). onclick =function(){ displayDate() };
</script>
嘗試一下»
在上面的例子中,名為displayDate 的函數被分配給了id=myButn" 的HTML 元素。
當按鈕被點擊時,將執行函數。
onload 和onunload 事件
當用戶進入或離開頁面時,會觸發onload 和onunload 事件。
onload 事件可用於檢查訪客的瀏覽器類型和版本,以便基於這些信息來加載不同版本的網頁。
onload 和onunload 事件可用於處理cookies。
onchange 事件
onchange 事件常用於輸入字段的驗證。
下面的例子展示瞭如何使用onchange。 當用戶改變輸入字段的內容時,將調用upperCase() 函數。
onmouseover 和onmouseout 事件
onmouseover 和onmouseout 事件可用於在鼠標指針移動到或離開元素時觸發函數。
onmousedown、onmouseup 以及onclick 事件
onmousedown、onmouseup 以及onclick 事件是鼠標點擊的全部過程。 首先當某個鼠標按鈕被點擊時,觸發onmousedown 事件,然後,當鼠標按鈕被鬆開時,會觸發onmouseup 事件,最後,當鼠標點擊完成時,觸發onclick 事件。
HTML DOM 事件對象參考手冊
如需每個事件的完整描述和例子,請訪問我們的HTML DOM參考手冊 。