JavaScript common events
In addition to the onclick event just mentioned, there are also these commonly used events:
onclick click
ondblclick double click
onfocus The element gains focus
onblur The element loses focus
onmouseover The mouse moves over an element
onmouseout The mouse moves away from an element
onmousedown The mouse button is pressed
onmouseup Mouse The key was released
onkeydown A certain keyboard key was pressed
onkeyup A certain keyboard key was released
onkeypress A keyboard key is pressed and released
The onmouseover and onmouseout events can be used to trigger functions when the mouse moves over and out of HTML elements. . For example, this example:
<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>
When the mouse moves in, "good" is displayed, and when the mouse moves out, "you have moved out" is displayed:
<html>
<head>
<script>
function mDown(obj) // 按下鼠標(biāo) 的 事件處理程序
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="release your mouse"
}
function mUp(obj) // 松開鼠標(biāo) 的 事件處理程序
{
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>The running results are visible. When the mouse is pressed, "release your mouse" is displayed and the background turns blue; after the mouse is released, "press here" is displayed and the background turns green. 
