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”:

0402.gif

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”,背景變為綠色。

0403.gif

繼續學習
||
<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>