JavaScript 使我們有能力創建動態頁面。事件是可以被 JavaScript 偵測到的行為。 網頁中的每個元素都可以產生某些可以觸發JavaScript函式的事件。比方說，我們可以在用戶點擊某按鈕時產生一個 onClick 事件來觸發某個函式。事件在 HTML 頁面中定義。
事件舉例,使用實例,事件分類,onload 和 onUnload事件,onFocus, onBlur 和 onChange事件,onSubmit事件,onMouseOver 和 onMouseOut事件,表單事件,
事件舉例
滑鼠點擊
頁面或圖像載入
滑鼠懸浮於頁面的某個熱點之上
在表單中選取輸入框
確認表單
鍵盤按鍵
注意：事件通常與函式配合使用，當事件發生時函式才會執行。
使用實例
本文介紹了一些關於JavaScript事件模型的使用，這些技巧是通過總結自其它的一些文章，一些關於腳本和DOM模型的文章。
我們的Rashambo套用於有三個連結，分別為rock、paper和scissors的設定的：
<p>Which one will it be?</p><div id="choices"> <a id="rock" href="#">rock</a> <a id="paper" href="#">paper</a> <a id="scissors" href="#">scissors</a></div>
這些連線看起來沒有連結到具體的內容上，說實話更深入就沒有什麼內容了。通過使用DOM，我把每一個連結命名為popUpResult JavaScript方法。這個DOM的所有代碼引入到前一個例子中，雖然這裡可能會做出快速改變，讓onclick事件的錨連結調用popUpResult方法：
window.onload = function() {var element = document.getElementById('choices');var anchors = element.getElementsByTagName('a');for (var i=0; i < anchors.length; i++ ) {anchors[i].onclick = popUpResult;}}Roshambo套用的這一疊代重點在於事件。這可以從兩方面看出來，一方面錨連結使他們的onclick事件與popUpResult方法關聯；另一方面，重編popUpResult方法，與JavaScript事件模型互動。
首先，你將會注意到popUpResult方法傳遞給了名為evt的事件對象。然後，從這個evt變數中，我們可以看到哪一個元素離開了事件，以及這一元素的ID屬性是什麼。這些信息可以告訴我們最終用戶是點擊了rock, paper還是scissors的連結。
popUpResult = function(evt){ var src = evt.srcElement; var id = src.getAttribute("id"); var result; if (id=='rock') {result = "tie"; } if (id=='paper') {result = "win"; } if (id=='scissors') {result = "lose"; } newWindow = open("","","top=200,left=200,height=200,width=400");newWindow.document.write("You " + result + "!");}執行一些邏輯條件找出最終用戶最後在遊戲中是贏了還是輸了。一個嵌套的else塊使用會更高效，但這三個if語句使代碼更容易閱讀。
最後，JavaScript代碼彈出一個新視窗。這些視窗不會像先前的疊代那樣顯示現有的HTML頁面，但是會創建一個空白視窗，顯示出結果。所以，疊代不僅使用了JavaScript事件模型，而且還消除對三個不必要的檔案的需求：win.html、lose.html和tie.html。當這一頁面運行在瀏覽器時，結果就如先前的疊代一樣。改變只是後台的實現方法。
下面是這一實例的完整代碼。
<html><head> <script> window.onload = function() {var element = document.getElementById('choices');var anchors = element.getElementsByTagName('a');for (var i=0; i < anchors.length; i++ ) {anchors[i].onclick = popUpResult;}} popUpResult = function(evt){ var src = evt.srcElement; var id = src.getAttribute("id"); var result; if (id=='rock') {result = "tie"; } if (id=='paper') {result = "win"; } if (id=='scissors') {result = "lose"; } newWindow = open("","","top=200,left=200,height=200,width=400");newWindow.document.write("You " + result + "!");} </script> </head><body><p>Which one will it be?</p><div id="choices"> <a id="rock" href="#">rock</a> <a id="paper" href="#">paper</a> <a id="scissors" href="#">scissors</a></div></body></html>事件分類
onload 和 onUnload事件
當用戶進入或離開頁面時就會觸發 onload 和 onUnload 事件。
onload 事件常用來檢測訪問者的瀏覽器類型和版本，然後根據這些信息載入特定版本的網頁。
onload 和 onUnload 事件也常被用來處理用戶進入或離開頁面時所建立的 cookies。例如，當某用戶第一次進入頁面時，你可以使用訊息框來詢問用戶的姓名。姓名會保存在 cookie 中。當用戶再次進入這個頁面時，你可以使用另一個訊息框來和這個用戶打招呼："Welcome John Doe!"。
onFocus, onBlur 和 onChange事件
onFocus、onBlur 和 onChange 事件通常相互配合用來驗證表單。
下面是一個使用 onChange 事件的例子。用戶一旦改變了域的內容，checkEmail() 函式就會被調用。
<inputtype="text"size="30"id="email"onchange="checkEmail()">
onSubmit事件
onSubmit 用於在提交表單之前驗證所有的表單域。
下面是一個使用 onSubmit 事件的例子。當用戶單擊表單中的確認按鈕時，checkForm() 函式就會被調用。假若域的值無效，此次提交就會被取消。checkForm() 函式的返回值是 true 或者 false。如果返回值為true，則提交表單，反之取消提交。
<formmethod="post"action="xxx.htm"onsubmit="returncheckForm()">
onMouseOver 和 onMouseOut事件
onMouseOver 和 onMouseOut 用來創建“動態的”按鈕。
下面是一個使用 onMouseOver 事件的例子。當 onMouseOver 事件被腳本偵測到時，就會彈出一個警告框：
<ahref=""onmouseover="alert('AnonMouseOverevent');returnfalse"><imgsrc=""width="100"height="30"></a>表單事件
表單事件
由HTML 表單內部的動作觸發的事件。
適用於所有HTML 5 元素，不過最常用於表單元素中：
屬性值描述
onblur script 當元素失去焦點時運行腳本
onchange script 當元素改變時運行腳本
oncontextmenu script 當觸發上下文選單時運行腳本
onfocus script 當元素獲得焦點時運行腳本
onformchange script 當表單改變時運行腳本
onforminput script 當表單獲得用戶輸入時運行腳本
oninput script 當元素獲得用戶輸入時運行腳本
oninvalid script 當元素無效時運行腳本
onreset script 當表單重置時運行腳本。HTML 5 不支持。
onselect script 當選取元素時運行腳本
onsubmit script 當提交表單時運行腳本
