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:

##onmousedown, onmouseup It is the event of mouse pressing and releasing. First, when the mouse button is clicked, the onmousedown event is triggered, and when the mouse button is released, the onmouseup event is triggered. For example:

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

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.

Continuing Learning

new file

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

submit Reset Code

Automatic operation

JavaScript common events

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]