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 腳本時釋放滑鼠按鍵運行


上一篇: JavaScript函數字面值 下一篇: JavaScript Cookies