最新的Web開發教程
 

JavaScript事件


HTML事件是“東西”這事發生在HTML元素。

當JavaScript的HTML頁面時,JavaScript可以對這些事件“作出反應”。


HTML事件

一個HTML事件可以是事物的瀏覽器,或一些用戶執行。

這裡是HTML事件的一些示例:

  • 一個HTML網頁加載完畢
  • 一個HTML輸入字段被改變
  • 一個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()'>The time is?</button>
試一試»

在上面的例子中,JavaScript代碼改變元素的含量與id="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 用戶從一個HTML元素上移動鼠標離開
onkeydown 用戶按下鍵盤鍵
onload 該瀏覽器已完成加載頁面

這份名單是更長的時間: w3ii javascript參考HTML DOM事件


有什麼可以做的JavaScript?

事件處理程序可以用來處理和驗證,用戶輸入,用戶的操作,和瀏覽器操作:

  • 事情應該做的每一次頁面加載
  • 東西的時候頁面被關閉了應該做的事
  • 當用戶點擊一個按鈕,應該執行的操作
  • 內容應被驗證時,用戶輸入數據
  • 和更多 ...

許多不同的方法可用於讓與事件的JavaScript工作:

  • HTML事件屬性可以直接執行JavaScript代碼
  • HTML事件屬性可以調用JavaScript函數
  • 您可以指定自己的事件處理函數HTML元素
  • 您可以阻止發送或正在處理事件
  • 和更多 ...

你會學到很多東西更多有關事件和事件處理HTML DOM的章節。


自測練習用!

練習1» 練習2» 練習3»