JavaScript 事件

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

當在 HTML 頁面中使用 JavaScript 時，JavaScript 能夠“應對”這些事件。

HTML 事件

HTML 事件可以是瀏覽器或用戶做的某些事情。

下面是 HTML 事件的一些例子：

  • HTML 網頁完成加載
  • HTML 輸入字段被修改
  • HTML 按鈕被點擊

通常，當事件發生時，用戶會希望做某件事。

JavaScript 允許您在事件被偵測到時執行代碼。

通過 JavaScript 代碼，HTML 允許您向 HTML 元素添加事件處理程序。

使用單引號：

<element event='一些 JavaScript'>

使用雙引號：

<element event="一些 JavaScript">

在下面的例子中，onclick 屬性（以及代碼）被添加到 <button> 元素：

實例

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

親自試一試

在上面的例子中，JavaScript 代碼改變了 id="demo" 的元素的內容。

在接下來的例子中，代碼（使用 this.innerHTML）改變了其自身元素的內容：

實例

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

親自試一試

JavaScript 代碼通常有很多行。事件屬性調用函數更為常見：

實例

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

親自試一試

常見的 HTML 事件

下面是一些常見的 HTML 事件：

事件 描述
onchange HTML 元素已被改變
onclick 用戶點擊了 HTML 元素
onmouseover 用戶把鼠標移動到 HTML 元素上
onmouseout 用戶把鼠標移開 HTML 元素
onkeydown 用戶按下鍵盤按鍵
onload 瀏覽器已經完成頁面加載

更完整的列表：CodeW3C.com JavaScript 參考手冊 HTML DOM 事件。

JavaScript 能夠做什么？

事件處理程序可用于處理、驗證用戶輸入、用戶動作和瀏覽器動作：

  • 每當頁面加載時應該做的事情
  • 當頁面被關閉時應該做的事情
  • 當用戶點擊按鈕時應該被執行的動作
  • 當用戶輸入數據時應該被驗證的內容
  • 等等

讓 JavaScript 處理事件的不同方法有很多：

  • HTML 事件屬性可執行 JavaScript 代碼
  • HTML 事件屬性能夠調用 JavaScript 函數
  • 您能夠向 HTML 元素分配自己的事件處理函數
  • 您能夠阻止事件被發送或被處理
  • 等等

您將在 HTML DOM 章節中學到更多有關事件和事件處理程序的知識。