JavaScript 事件

HTML 事件是發生在 HTML 元素上的事情。

當在 HTML 頁面中使用 JavaScript 時， JavaScript 可以觸發這些事件。

HTML 事件

HTML 事件可以是流覽器行為，也可以是用戶行為。

以下是 HTML 事件的實例：

  • HTML 頁面完成加載
  • HTML input 字段改變時
  • HTML 按鈕被點擊

通常，當事件發生時，你可以做些事情。

在事件觸發時 JavaScript 可以執行一些代碼。

HTML 元素中可以添加事件屬性，使用 JavaScript 代碼來添加 HTML 元素。

單引號:

<some-HTML-element some-event='JavaScript 代碼'>

雙引號:

<some-HTML-element some-event="JavaScript 代碼">

在以下實例中，按鈕元素中添加了 onclick 屬性 (並加上代碼):

實例

<button onclick="getElementById('demo').innerHTML=Date()">現在的時間是?</button>

以上實例中，JavaScript 代碼將修改 id="demo" 元素的內容。

在下一個實例中，代碼將修改自身元素的內容 (使用 this.innerHTML):

實例

<button onclick="this.innerHTML=Date()">現在的時間是?</button>


Note JavaScript代碼通常是幾行代碼。比較常見的是通過事件屬性來調用：

實例

<button onclick="displayDate()">現在的時間是?</button>


常見的HTML事件

下麵是一些常見的HTML事件的列表:

事件 描述
onchange HTML 元素改變
onclick 用戶點擊 HTML 元素
onmouseover 用戶在一個HTML元素上移動滑鼠
onmouseout 用戶從一個HTML元素上移開滑鼠
onkeydown 用戶按下鍵盤按鍵
onload 流覽器已完成頁面的加載

更多事件列表: JavaScript 參考手冊 - HTML DOM 事件。

JavaScript 可以做什麼?

事件可以用於處理表單驗證，用戶輸入，用戶行為及流覽器動作:

  • 頁面加載時觸發事件
  • 頁面關閉時觸發事件
  • 用戶點擊按鈕執行動作
  • 驗證用戶輸入內容的合法性
  • 等等 ...

可以使用多種方法來執行 JavaScript 事件代碼：

  • HTML 事件屬性可以直接執行 JavaScript 代碼
  • HTML 事件屬性可以調用 JavaScript 函數
  • 你可以為 HTML 元素指定自己的事件處理程式
  • 你可以阻止事件的發生。
  • 等等 ...
Note 在 HTML DOM 章節中你將會學到更多關於事件及事件處理程式的知識。