JavaScript常用事件

除了剛才提到的onclick 事件，還有這些常用的事件：

#onclick 點擊
##ondblclick 雙擊
onfocus 元素獲得焦點
onblur 元素失去焦點
onmouseover 滑鼠移到某個元素之上
onmouseout 滑鼠從某元素移開
onmousedown 滑鼠按鈕被按下
onmouseup 滑鼠按鍵被放開
onkeydown 某個鍵盤按鍵被按下
onkeyup 某個鍵盤按鍵被放開
#onkeypress 某個鍵盤按鍵被按下並放開

其中，onmouseover 和onmouseout 事件可用來在滑鼠移至HTML 元素上和移出元素時觸發函數。例如這個例子：

<html>
<head></head>
<body>
<div style="background-color:green;width:200px;height:50px;margin:20px;padding-top:10px;color:#ffffff;font-weight:bold;font-size:18px;text-align:center;"
onmouseover="this.innerHTML='good'"
onmouseout="this.innerHTML='you have moved out'"
>move your mouse to here</div>
</body>
</html>

滑鼠移入時，顯示“good”，滑鼠移出時顯示“you have moved out”：

onmousedown, onmouseup是滑鼠壓下和鬆開的事件。首先當點擊滑鼠按鈕時，會觸發 onmousedown 事件，當釋放滑鼠按鈕時，會觸發 onmouseup 事件。舉例說明：

<html>
<head>
  <script>
    function mDown(obj)    // 按下鼠标 的 事件处理程序
    {
    obj.style.backgroundColor="#1ec5e5";
    obj.innerHTML="release your mouse"
    }
    function mUp(obj)     // 松开鼠标 的 事件处理程序
    {
    obj.style.backgroundColor="green";
    obj.innerHTML="press here"
    }
  </script>
</head>
<body>
<div style="background-color:green;width:200px;height:35px;margin:20px;padding-top:20px;color:rgb(255,255,255);font-weight:bold;font-size:18px;text-align:center;"
onmousedown="mDown(this)"
onmouseup="mUp(this)"
>press here</div>
</body>
</html>

運行結果可見，按下滑鼠時，顯示“release your mouse”，背景變為藍色；鬆開滑鼠後，顯示為“press here”，背景變為綠色。

新建檔案

<html>
<head>
 <script>
 function mDown(obj) // 按下鼠标 的 事件处理程序
 {
 obj.style.backgroundColor="#1ec5e5";
 obj.innerHTML="release your mouse"
 }
 function mUp(obj) // 松开鼠标 的 事件处理程序
 {
 obj.style.backgroundColor="green";
 obj.innerHTML="press here"
 }
 </script>
</head>
<body>
<div style="background-color:green;width:200px;height:35px;margin:20px;padding-top:20px;color:rgb(255,255,255);font-weight:bold;font-size:18px;text-align:center;"
onmousedown="mDown(this)"
onmouseup="mUp(this)"
>press here</div>
</body>
</html>

提交重置程式碼

自動運行

全螢幕