【JavaScript教學】JavaScript 事件

JavaScript 事件

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

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

HTML 事件

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

以下是 HTML 事件的實例：

HTML 頁面完成載入

HTML input 欄位改變時

HTML 按鈕被點擊

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

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

HTML 元素中可以新增事件屬性，使用 JavaScript 程式碼來新增 HTML 元素。

單引號:

<some-HTML-element some-event=&#39;some JavaScript&#39;>

雙引號:

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

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

實例

<button onclick=&#39;getElementById("demo").innerHTML=Date()&#39;>The time is?</button>

以上實例中，Javad=" demo" 元素的內容。

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

實例

<button onclick="this.innerHTML=Date()">The time is?</button>

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

實例

<button onclick="displayDate()">The time is?</button>

常見的HTML事件

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

事件

描述

onchange    HTML 元素改變   

onclick    使用者點選HTML 元素   

onmouseover    使用者在一個HTML元素上移動滑鼠   

onmouseout      瀏覽器已完成頁面的載入   

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

JavaScript 可以做什麼?

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

頁面加載時觸發事件

頁面關閉時觸發事件

用戶點擊按鈕執行動作

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

等等...

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

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

HTML 事件屬性可以呼叫JavaScript 函數

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

你可以阻止事件的發生。

等等 ...

在 HTML DOM 章節中你將會學到更多關於事件及事件處理程序的知識。

   

 以上就是【JavaScript教學】JavaScript 事件的內容，更多相關內容請關注PHP中文網（www.php.cn）！