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 DOM 事件

HTML DOM 使JavaScript 有能力對HTML 事件做出反應。

實例

Mouse Over Me
Click Me


對事件做出反應

我們可以在事件發生時執行JavaScript,比如當用戶在HTML 元素上點擊時。

如需在用戶點擊某個元素時執行代碼,請向一個HTML 事件屬性添加JavaScript 代碼:

onclick=JavaScript

HTML 事件的例子:

  • 當用戶點擊鼠標時
  • 當網頁已加載時
  • 當圖像已加載時
  • 當鼠標移動到元素上時
  • 當輸入字段被改變時
  • 當提交HTML 表單時
  • 當用戶觸發按鍵時

在本例中,當用戶在<h1> 元素上點擊時,會改變其內容:

實例

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">點擊文本!</h1>
</body>
</html>

嘗試一下»

本例從事件處理器調用一個函數:

實例

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">點擊文本!</h1>
</body>
</html>

嘗試一下»


HTML 事件屬性

如需向HTML 元素分配事件,您可以使用事件屬性。

實例

向button 元素分配onclick 事件:

<button onclick =" displayDate() ">點這裡</button>

嘗試一下»

在上面的例子中,名為displayDate 的函數將在按鈕被點擊時執行。


使用HTML DOM 來分配事件

HTML DOM 允許您使用JavaScript 來向HTML 元素分配事件:

實例

向button 元素分配onclick 事件:

<script>
document.getElementById("myBtn"). onclick =function(){ displayDate() };
</script>

嘗試一下»

在上面的例子中,名為displayDate 的函數被分配給id=myButn" 的HTML 元素。

按鈕點擊時Javascript函數將會被執行。


onload 和onunload 事件

onload 和onunload 事件會在用戶進入或離開頁面時被觸發。

onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本,並基於這些信息來加載網頁的正確版本。

onload 和onunload 事件可用於處理cookie。

實例

<body onload ="checkCookies()">

嘗試一下»


onchange 事件

onchange 事件常結合對輸入字段的驗證來使用。

下面是一個如何使用onchange 的例子。 當用戶改變輸入字段的內容時,會調用upperCase() 函數。

實例

<input type="text" id="fname" onchange ="upperCase()">

嘗試一下»


onmouseover 和onmouseout 事件

onmouseover 和onmouseout 事件可用於在用戶的鼠標移至HTML 元素上方或移出元素時觸發函數。

實例

一個簡單的onmouseover-onmouseout 實例:

Mouse Over Me

嘗試一下»


onmousedown、onmouseup 以及onclick 事件

onmousedown, onmouseup 以及onclick 構成了鼠標點擊事件的所有部分。 首先當點擊鼠標按鈕時,會觸發onmousedown 事件,當釋放鼠標按鈕時,會觸發onmouseup 事件,最後,當完成鼠標點擊時,會觸發onclick 事件。

實例

一個簡單的onmousedown-onmouseup 實例:

Thank You


更多實例

onmousedown和onmouseup
當用戶按下鼠標按鈕時,更換一幅圖像。

onload
當頁面完成加載時,顯示一個提示框。

onfocus
當輸入字段獲得焦點時,改變其背景色。

鼠標事件
當指針移動到元素上方時,改變其顏色;當指針移出文本後,會再次改變其顏色。