JavaScript事件

事件是什麼 ?

JavaScript與HTML交互是通過在用戶或瀏覽器操縱頁麵上發生的事件進行處理。

當頁麵加載，這是一個事件。當用戶點擊一個按鈕，這一下，也就是一個事件。事件的另一個例子是類似按下任意鍵，關閉窗口，調整窗口等。

開發者可以使用這些事件執行JavaScript編碼響應，這引起按鈕以關閉視窗，消息，以便顯示給用戶，要驗證的數據，以及幾乎任何其它類型的響應可以發生的。

事件是文檔對象模型(DOM)第3級，每一個HTML元素的一部分有一套可以觸發JavaScript代碼事件。

請繼續通過這個小教學更好地理解 HTML事件參考. 在這裡，我們將看到一些例子來了解事件和JavaScript之間的關係：

onclick事件類型：

這是當用戶點擊鼠標左鍵時發生的最頻繁使用的事件類型。可以針對此事件類型把驗證信息，警告等顯示。

例子：

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
   alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

這將產生以下結果，當你點擊“Hello”按鈕，然後會的onclick事件的發生將觸發sayHello()函數。

onsubmit 事件類型：

另一個最重要的事件類型是 onsubmit。當嘗試提交表單時引發此事件。所以，可以把表單驗證針對此事件類型。

下麵是簡單的例子，說明它的用法。在這裡，我們提交表單數據到Web服務器之前，調用一個validate()函數。如果表單將被提交的validate()函數返回true，否則不會提交數據。

例子：

<html>
<head>
<script type="text/javascript">
<!--
function validation() {
   all validation goes here
   .........
   return either true or false
}
//-->
</script>
</head>
<body>
<form method="POST" action="t.cgi" onsubmit="return validate()">
.......
<input type="submit" value="Submit" />
</form>
</body>
</html>

onmouseover 和 onmouseout:

這兩個事件類型將幫助創建圖片甚至用文字以及不錯的效果。當把鼠標在任何元素，當從元素把鼠標移出發生onmouseout事件，移過時發生 onmouseover 事件。

例子：

下麵的例子說明，分組反應如下：

<html>
<head>
<script type="text/javascript">
<!--
function over() {
   alert("Mouse Over");
}
function out() {
   alert("Mouse Out");
}
//-->
</script>
</head>
<body>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>

可以使用這兩個事件類型改變不同的圖像，也可以創建幫助你的用戶。

HTML 4 標準事件

標準的HTML4事件列在這裡，供大家參考。下麵的腳本顯示一個Javascript函數功能以對該事件執行。

Event	Value	描述
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	腳本時釋放鼠標按鍵運行