JavaScript 事件

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

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

HTML 事件可以是浏覽器行為，也可以是使用者行為。

以下是 HTML 事件的執行個體：

HTML 頁面完成加載

HTML input 字段改變時

HTML 按鈕被點選

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

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

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

單引号:

<some-HTML-element

some-event='JavaScript 代碼'>

雙引号:

some-event="JavaScript 代碼">

在以下執行個體中，按鈕元素中添加了 onclick 屬性 (并加上代碼):

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

以上執行個體中，JavaScript 代碼将修改 id="demo" 元素的内容。

在下一個執行個體中，代碼将修改自身元素的内容 (使用 this.innerHTML):

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

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

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

下面是一些常見的HTML事件的清單:

事件

描述

onchange

HTML 元素改變

onclick

使用者點選 HTML 元素

onmouseover

滑鼠指針移動到指定的元素上時發生

onmouseout

使用者從一個 HTML 元素上移開滑鼠時發生

onkeydown

使用者按下鍵盤按鍵

onload

浏覽器已完成頁面的加載

更多事件清單: JavaScript 參考手冊 - HTML DOM 事件。

事件可以用于處理表單驗證，使用者輸入，使用者行為及浏覽器動作:

頁面加載時觸發事件

頁面關閉時觸發事件

使用者點選按鈕執行動作

驗證使用者輸入内容的合法性

等等 ...

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

HTML 事件屬性可以直接執行 JavaScript 代碼

HTML 事件屬性可以調用 JavaScript 函數

你可以為 HTML 元素指定自己的事件處理程式

你可以阻止事件的發生。

在 HTML DOM 章節中你将會學到更多關于事件及事件處理程式的知識。