Latest web development tutorials
×

JavaScript 教程

JavaScript 教程 JavaScript 簡介 JavaScript 用法 JavaScript 輸出 JavaScript 語法 JavaScript 語句 JavaScript 註釋 JavaScript 變量 JavaScript 數據類型 JavaScript 對象 JavaScript 函數 JavaScript 作用域 JavaScript 事件 JavaScript 字符串 JavaScript 運算符 JavaScript 比較 JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript 類型轉換 JavaScript 正則表達式 JavaScript 錯誤 JavaScript 調試 JavaScript 變量提升 JavaScript 嚴格模式 JavaScript 使用誤區 JavaScript 表單驗證 JavaScript 保留關鍵字 JavaScript JSON JavaScript void JavaScript 代碼規範

JS 函數

JavaScript 函數定義 JavaScript 函數參數 JavaScript 函數調用 JavaScript 閉包

JS HTML DOM

DOM 簡介 DOM HTML DOM CSS DOM 事件 DOM EventListener DOM 元素

JS 高級教程

JavaScript 對象 JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp 對象

JS 瀏覽器 BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript 彈窗 JavaScript 計時事件 JavaScript Cookies

JS 庫

JavaScript 庫 JavaScript 測試 jQuery JavaScript 測試 Prototype

JS 實例

JavaScript 實例 JavaScript 對象實例 JavaScript 瀏覽器對象實例 JavaScript HTML DOM 實例 JavaScript 總結

JS 參考手冊

JavaScript 對象 HTML DOM 對象

JavaScript 事件

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

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

HTML 事件

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

以下是HTML 事件的實例：

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

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

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

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

單引號:

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

雙引號:

< some-HTML-element some-event = " some 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 章節中你將會學到更多關於事件及事件處理程序的知識。