JavaScript 事件

為JavaScript在瀏覽器中以單執行緒模式執行，頁面載入後，一旦頁面上所有的JavaScript程式碼執行完後，就只能依賴觸發事件來執行JavaScript程式碼。

瀏覽器在接收到使用者的滑鼠或鍵盤輸入後，會自動在對應的DOM節點上觸發對應的事件。如果節點已經綁定了對應的JavaScript處理函數，則該函數就會自動呼叫。

JavaScript 事件

網頁中能被 JavaScript 偵測到的行為稱為 JavaScript 事件。以下是一些常見的JavaScript 事件範例：

1. 頁面內容被瀏覽器載入

2. 使用者點擊一個按鈕

3. 使用者按下某個按鍵

事件通常和 JavaScript 函數一起配合使用，也就是以事件驅動函數，來完成我們想要的某些功能。

常見的HTML事件

以下是一些常見的HTML事件的清單:

事件 #描述說明

##onchange HTML 元素改變

onclick 使用者點選HTML 元素 #onmouseover 使用者在一個HTML 上移開鼠標

onkeydown 用戶按下鍵盤按鍵

onload 瀏覽器已完成頁面的加載

onclick 事件

######當滑鼠點擊頁面上某個物件時，會觸發onclick 事件，如下例子所示：###

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script type="text/javascript">
function hello(){
    var name = document.getElementById("name").value;
    if( name == "") {
        alert("请输入你的姓名！");
        return false;
    } else {
        alert(name + "，你好！");
    }
}
</script>
</head>
<body>
  姓名：<input type="text" id="name" />
  <input type="button" onclick="hello()" value="确定" />
</body>
</html>

###在上面的例子中，對確定按鈕設定了onclick 事件屬性，其值為"hello()" JavaScript 函數，也即點擊按鈕時，執行hello 函數。 ###

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>

###JavaScript 可以做什麼?######事件可以用來處理表單驗證，使用者輸入，使用者行為及瀏覽器動作:###

頁面載入時觸發事件頁面關閉時觸發事件使用者點擊按鈕執行動作驗證使用者輸入內容的合法性等等...

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

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

HTML 事件屬性可以呼叫JavaScript 函數你可以為

HTML 元素指定自己的事件處理程序

#你可以封鎖事件的發生。

等等 ...

繼續學習

新建檔案

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> function hello(){ var name = document.getElementById("name").value; if( name == "") { alert("请输入你的姓名！"); return false; } else { alert(name + "，你好！"); } } </script> </head> <body> 姓名：<input type="text" id="name" /> <input type="button" onclick="hello()" value="确定" /> </body> </html>

重置程式碼

自動運行

提交

預覽 Clear