ES6 - 事件

JavaScript 的目的是為您的頁面新增互動性。JavaScript 使用事件機制來實現這一點。事件是文件物件模型 (DOM) 3 級的一部分，每個 HTML 元素都包含一組可以觸發 JavaScript 程式碼的事件。

事件是軟體識別的一個動作或事件。它可以由使用者或系統觸發。一些常見的事件示例包括使用者單擊按鈕、載入網頁、單擊超連結等。以下是一些常見的 HTML 事件。

事件處理程式

事件發生時，應用程式會執行一組相關的任務。實現此目的的程式碼塊稱為事件處理程式。每個 HTML 元素都有一組與其關聯的事件。我們可以使用事件處理程式在 JavaScript 中定義如何處理這些事件。

onclick 事件型別

這是最常用的事件型別，當用戶單擊滑鼠左鍵時發生。您可以針對此事件型別設定驗證、警告等。

示例

<html> 
   <head> 
      <script type = "text/javascript">  
         function sayHello() {  
            document.write ("Hello World")  
         }   
      </script> 
   </head> 
   
   <body> 
      <p> Click the following button and see result</p> 
      <input type = "button" onclick = "sayHello()" value = "Say Hello" /> 
   </body> 
</html>

以上程式碼成功執行後顯示以下輸出。

onsubmit 事件型別

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

這兩個事件型別將幫助您使用影像甚至文字建立不錯的效果。onmouseover 事件在您將滑鼠移到任何元素上時觸發，而onmouseout 事件在您將滑鼠從該元素移開時觸發。

示例

<html> 
   <head> 
      <script type = "text/javascript"> 
         function over() {  
            document.write ("Mouse Over");  
         }  
         function out() {  
            document.write ("Mouse Out");  
         }  
      </script> 
   </head> 

   <body> 
      <p>Bring your mouse inside the division to see the result:</p> 
      <div onmouseover = "over()" onmouseout = "out()"> 
         <h2> This is inside the division </h2> 
      </div> 
   </body> 
</html>

以上程式碼成功執行後顯示以下輸出。

HTML 5 標準事件

下表列出了標準 HTML 5 事件，供您參考。指令碼表示要針對該事件執行的 JavaScript 函式。

屬性	值	描述
offline	指令碼	文件離線時觸發
onabort	指令碼	在中止事件中觸發
onafterprint	指令碼	文件列印後觸發
onbeforeonload	指令碼	文件載入前觸發
onbeforeprint	指令碼	文件列印前觸發
onblur	指令碼	視窗失去焦點時觸發
oncanplay	指令碼	媒體可以開始播放時觸發，但可能需要停止緩衝
oncanplaythrough	指令碼	媒體可以播放到結尾時觸發，無需停止緩衝
onchange	指令碼	元素更改時觸發
onclick	指令碼	滑鼠單擊時觸發
oncontextmenu	指令碼	觸發上下文選單時觸發
ondblclick	指令碼	滑鼠雙擊時觸發
ondrag	指令碼	拖動元素時觸發
ondragend	指令碼	拖動操作結束時觸發
ondragenter	指令碼	將元素拖動到有效放置目標時觸發
ondragleave	指令碼	元素離開有效放置目標時觸發
ondragover	指令碼	將元素拖動到有效放置目標上時觸發
ondragstart	指令碼	拖動操作開始時觸發
ondrop	指令碼	拖動元素被放下時觸發
ondurationchange	指令碼	媒體長度更改時觸發
onemptied	指令碼	媒體資源元素突然變空時觸發
onended	指令碼	媒體到達結尾時觸發
onerror	指令碼	發生錯誤時觸發
onfocus	指令碼	視窗獲得焦點時觸發
onformchange	指令碼	表單更改時觸發
onforminput	指令碼	表單獲得使用者輸入時觸發
onhaschange	指令碼	文件更改時觸發
oninput	指令碼	元素獲得使用者輸入時觸發
oninvalid	指令碼	元素無效時觸發
onkeydown	指令碼	按下鍵時觸發
onkeypress	指令碼	按下並釋放鍵時觸發
onkeyup	指令碼	釋放鍵時觸發
onload	指令碼	文件載入時觸發
onloadeddata	指令碼	載入媒體資料時觸發
onloadedmetadata	指令碼	載入媒體元素的持續時間和其他媒體資料時觸發
onloadstart	指令碼	瀏覽器開始載入媒體資料時觸發
onmessage	指令碼	觸發訊息時觸發
onmousedown	指令碼	按下滑鼠按鈕時觸發
onmousemove	指令碼	滑鼠指標移動時觸發
onmouseout	指令碼	滑鼠指標移出元素時觸發
onmouseover	指令碼	滑鼠指標移到元素上時觸發
onmouseup	指令碼	釋放滑鼠按鈕時觸發
onmousewheel	指令碼	旋轉滑鼠滾輪時觸發
onoffline	指令碼	文件離線時觸發
ononline	指令碼	文件上線時觸發
onpagehide	指令碼	視窗隱藏時觸發
onpageshow	指令碼	視窗可見時觸發
onpause	指令碼	暫停媒體資料時觸發
onplay	指令碼	媒體資料即將開始播放時觸發
onplaying	指令碼	媒體資料開始播放時觸發
onpopstate	指令碼	視窗歷史記錄更改時觸發
onprogress	指令碼	瀏覽器正在獲取媒體資料時觸發
onratechange	指令碼	媒體資料的播放速率更改時觸發
onreadystatechange	指令碼	就緒狀態更改時觸發
onredo	指令碼	文件執行重做操作時觸發
onresize	指令碼	視窗大小調整時觸發
onscroll	指令碼	滾動元素的捲軸時觸發
onseeked	指令碼	媒體元素的 seeking 屬性不再為 true 且搜尋已結束時觸發
onseeking	指令碼	媒體元素的 seeking 屬性為 true 且搜尋已開始時觸發
onselect	指令碼	選擇元素時觸發
onstalled	指令碼	獲取媒體資料時出錯時觸發
onstorage	指令碼	文件載入時觸發
onsubmit	指令碼	提交表單時觸發
onsuspend	指令碼	瀏覽器一直在獲取媒體資料，但在獲取整個媒體檔案之前停止時觸發
ontimeupdate	指令碼	媒體更改其播放位置時觸發
onundo	指令碼	文件執行撤消操作時觸發
onunload	指令碼	使用者離開文件時觸發
onvolumechange	指令碼	媒體更改音量時觸發，將音量設定為“靜音”時也會觸發
onwaiting	指令碼	媒體已停止播放但預計會恢復播放時觸發

列印頁面