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 屬性(並加上程式碼) :

實例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>
</body>
</html>

以上實例中,JavaScript 程式碼將修改id="demo" 元素的內容。

執行程式碼嘗試

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
</body>
</html>

執行程式碼試試看


提示:JavaScript程式碼通常是幾行程式碼。比較常見的是透過事件屬性來呼叫:


常見的HTML事件

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

事件描述
#onchangeHTML 元素改變
onclick使用者點選HTML 元素
#onmouseover使用者在一個HTML元素上移動滑鼠
#onmouseout使用者從一個HTML元素上移開滑鼠
onkeydown使用者按下鍵盤按鍵
onload瀏覽器已完成頁面的載入

JavaScript 可以做什麼?

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

  • 頁面載入時觸發

  • 事件頁面關閉時觸發

  • 事件使用者點擊按鈕執行動作

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

  • 等等...

可以使用多種方法來執行JavaScript 事件程式碼:

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

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

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

  • ##你可以阻止事件的發生。

  • 等等...


繼續學習
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button> <p id="demo"></p> </body> </html>