JavaScript常用事件
除了剛才提到的onclick 事件,還有這些常用的事件:
#onclick 點擊
- ##ondblclick 雙擊
- onfocus 元素獲得焦點
- onblur 元素失去焦點
- onmouseover 滑鼠移到某個元素之上
- onmouseout 滑鼠從某元素移開
- onmousedown 滑鼠按鈕被按下
- onmouseup 滑鼠按鍵被放開
- onkeydown 某個鍵盤按鍵被按下
- onkeyup 某個鍵盤按鍵被放開
- #onkeypress 某個鍵盤按鍵被按下並放開
<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”,背景變為綠色。