JavaScript - DOM 事件

上一頁
下一頁

DOM 事件是在 HTML 元素上可以執行的操作。當事件發生時，它會觸發一個 JavaScript 函式。然後可以使用此函式來更改 HTML 元素或執行其他操作。

以下是一些 DOM 事件的示例

  • Click - 當用戶單擊 HTML 元素時發生此事件。

  • Load - 當 HTML 元素載入時發生此事件。

  • Change - 當 HTML 元素的值更改時發生此事件。

  • Submit - 當 HTML 表單提交時發生此事件。

您可以使用事件處理程式或 addEventListener() 方法來偵聽和響應 DOM 事件。addEventListener() 方法接受兩個引數：事件的名稱以及事件發生時要呼叫的函式。

DOM 事件也稱為文件物件模型事件。當任何事件發生時，它用於與 DOM 元素互動並從 JavaScript 中操作 DOM 元素。

讓我們看看下面 DOM 事件的示例。

onclick 事件型別

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

示例

嘗試以下示例。

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

ondblclick 事件型別

我們在下面的程式碼中使用 'ondblclick' 事件處理程式與元素。當用戶雙擊按鈕時，它會呼叫 changeColor() 函式。

在 changeColor() 函式中，我們更改文字的顏色。因此，當用戶雙擊按鈕時，程式碼會更改文字的顏色。

示例

<html>
<body>
   <h2 id = "text"> Hi Users! </h2>
   <button ondblclick="changeColor()"> Double click me! </button>
   <script>
      function changeColor() {
         document.getElementById("text").style.color = "red";
     }
   </script>
</body>
</html>

onkeydown 事件型別

我們在下面的程式碼中使用 'keydown' 事件與 <input> 元素。每當使用者按下任何鍵時，它都會呼叫 customizeInput() 函式。

在 customizeInput() 函式中，我們將輸入的背景顏色和輸入文字更改為紅色。

示例

<html>
<body>
   <p> Enter charater/s by pressing any key  </p>
   <input type = "text" onkeydown = "customizeInput()">
   <script>
      function customizeInput() {
         var ele = document.getElementsByTagName("INPUT")[0];
         ele.style.backgroundColor = "yellow";
         ele.style.color = "red";
      }
   </script>
</body>

onmouseenter 和 onmouseleave 事件

在下面的程式碼中，我們使用 'onmouseenter' 和 'onmouseleave' 事件處理程式在 <div> 元素上新增懸停效果。

當滑鼠指標進入 <div> 元素時，它會呼叫 changeRed() 函式將文字顏色更改為紅色，當滑鼠指標離開 <div> 元素時，它會呼叫 changeBlack() 函式將文字顏色再次更改為黑色。

示例

<html>
<body>
   <div id = "text" style = "font-size: 20px;" onmouseenter = "changeRed()" onmouseleave = "changeBlack()"> Hover over the text. </div>
   <script>
      function changeRed() {
         document.getElementById("text").style.color = "red";
      }
      function changeBlack() {
         document.getElementById("text").style.color = "black";
      }
   </script>
</body>
</html>

HTML 5 標準 DOM 事件

此處列出了標準 HTML 5 事件以供參考。此處指令碼表示針對該事件執行的 Javascript 函式。

屬性 值 描述
Offline script 文件離線時觸發
Onabort script 在中止事件上觸發
onafterprint script 文件列印後觸發
onbeforeonload script 文件載入前觸發
onbeforeprint script 文件列印前觸發
onblur script 視窗失去焦點時觸發
oncanplay script 媒體可以開始播放時觸發，但可能需要停止緩衝
oncanplaythrough script 媒體可以播放到結尾時觸發，無需停止緩衝
onchange script 元素更改時觸發
onclick script 滑鼠單擊時觸發
oncontextmenu script 觸發上下文選單時觸發
ondblclick script 滑鼠雙擊時觸發
ondrag script 元素被拖動時觸發
ondragend script 拖動操作結束時觸發
ondragenter script 元素被拖動到有效放置目標時觸發
ondragleave script 元素被拖過有效放置目標時觸發
ondragover script 拖動操作開始時觸發
ondragstart script 拖動操作開始時觸發
ondrop script 拖動元素被放下時觸發
ondurationchange script 媒體長度更改時觸發
onemptied script 媒體資源元素突然變空時觸發。
onended script 媒體到達結尾時觸發
onerror script 發生錯誤時觸發
onfocus script 視窗獲得焦點時觸發
onformchange script 表單更改時觸發
onforminput

 script 當表單獲取使用者輸入時觸發
onhaschange script 當文件發生更改時觸發
oninput script 當元素獲取使用者輸入時觸發
oninvalid script 當元素無效時觸發
onkeydown script 當按下按鍵時觸發
onkeypress script 當按下並釋放按鍵時觸發
onkeyup script 當釋放按鍵時觸發
onload script 當文件載入時觸發
onloadeddata script 當媒體資料載入時觸發
onloadedmetadata script 當媒體元素的時長和其他媒體資料載入時觸發
onloadstart script 當瀏覽器開始載入媒體資料時觸發
onmessage script 當訊息被觸發時觸發
onmousedown script 當按下滑鼠按鈕時觸發
onmousemove script 當滑鼠指標移動時觸發
onmouseout script 當滑鼠指標移出元素時觸發
onmouseover script 當滑鼠指標移到元素上時觸發
onmouseup script 當釋放滑鼠按鈕時觸發
onmousewheel script 當滑鼠滾輪被旋轉時觸發
onoffline script 文件離線時觸發
離線 script 當文件上線時觸發
ononline script 當文件上線時觸發
onpagehide script 當視窗隱藏時觸發
onpageshow script 當視窗變得可見時觸發
onpause script 當媒體資料暫停時觸發
onplay script 當媒體資料即將開始播放時觸發
onplaying script 當媒體資料開始播放時觸發
onpopstate script 當視窗的歷史記錄發生更改時觸發
onprogress script 當瀏覽器正在獲取媒體資料時觸發
onratechange script 當媒體資料的播放速度發生更改時觸發
onreadystatechange script 當就緒狀態發生更改時觸發
onredo script 當文件執行重做操作時觸發
onresize script 當視窗大小調整時觸發
onscroll script 當元素的捲軸被滾動時觸發
onseeked script 當媒體元素的 seeking 屬性不再為 true，並且查詢操作已結束時觸發
onseeking script 當媒體元素的 seeking 屬性為 true，並且查詢操作已開始時觸發
onselect script 當元素被選中時觸發
onstalled script 當獲取媒體資料時發生錯誤時觸發
onstorage script 當文件載入時觸發
onsubmit script 當表單提交時觸發
onsuspend script 當瀏覽器已獲取媒體資料，但在獲取整個媒體檔案之前停止時觸發
ontimeupdate script 當媒體更改其播放位置時觸發
onundo script 當文件執行撤消操作時觸發
onunload script 當用戶離開文件時觸發
onvolumechange script 當媒體更改音量時觸發，包括將音量設定為“靜音”時
onwaiting script 當媒體已停止播放，但預計將恢復時觸發
列印頁面
上一頁
下一頁
廣告