JavaScript 事件

2022-05-18 14:21 更新

事件是可以被 JavaScript 偵測到的行為。


HTML 事件是發(fā)生在 HTML 元素上的事情。

當在 HTML 頁面中使用 JavaScript 時, JavaScript 可以觸發(fā)這些事件。


HTML 事件

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

HTML 網(wǎng)頁中的每個元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 函數(shù)的事件。

以下是 HTML 事件的實例:

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

通常,當事件發(fā)生時,你可以做些事情。

在事件觸發(fā)時 JavaScript 可以執(zhí)行一些代碼。

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

單引號:

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

雙引號:

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

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

實例

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

嘗試一下 ?

以上實例中,JavaScript 代碼將修改 id="demo" 元素的內(nèi)容。

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

實例

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

嘗試一下 ?

Note JavaScript代碼通常是幾行代碼。比較常見的是通過事件屬性來調(diào)用:

實例

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

嘗試一下 ?


常見的HTML事件

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

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

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


JavaScript 可以做什么?

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

  • 頁面加載時觸發(fā)事件
  • 頁面關(guān)閉時觸發(fā)事件
  • 用戶點擊按鈕執(zhí)行動作
  • 驗證用戶輸入內(nèi)容的合法性
  • 等等 ...

可以使用多種方法來執(zhí)行 JavaScript 事件代碼:

  • HTML 事件屬性可以直接執(zhí)行 JavaScript 代碼
  • HTML 事件屬性可以調(diào)用 JavaScript 函數(shù)
  • 你可以為 HTML 元素指定自己的事件處理程序
  • 你可以阻止事件的發(fā)生。
  • 等等 ...
Note 在 HTML DOM 章節(jié)中你將會學(xué)到更多關(guān)于事件及事件處理程序的知識。


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號