Use HTML DOM to assign events--onmouseover and onmouseout, onmousedown and onmouseup

one ,

onmouseover and onmouseout Events

The onmouseover and onmouseout events can be used to trigger a function when a user moves the mouse over an HTML element or moves out of an element.

A small example: the mouse does not move forward above the top

(1) Key code

Style= "Background-color:green;width:120px;height:20px;padding:40px;color: #ffffff;" > Move the mouse over </div><script>function  mOver (obj) {obj.innerhtml= "Thank You"}  function  mout (obj) {obj.innerhtml= "Move mouse over"}</script>
(2) Key code  (two ways can be achieved)
<div onmouseover= "innerhtml= ' Thank You '" onmouseout= "innerhtml= ' Move mouse over '"
Style= "Width:120px;height:20px;padding:40px;color: #ffffff;" > Move the mouse over the top </div>

two ,

OnMouseDown, onmouseup, and onclick events

OnMouseDown, onmouseup, and onclick form all parts of the mouse click event. First, when the mouse button is clicked, the OnMouseDown event is triggered, and when the mouse button is released, the OnMouseUp event is triggered, and the onclick event is triggered when the mouse click is completed.

Cases:

When you do not press the mouse to click the mouse before releasing

(1) Key code
<div onmousedown= "MDown (This)" onmouseup= "mUp (This)" style= "Background-color:green;color: #ffffff;
width:90px;height:20px;padding:40px;font-size:12px; " > Click here </div><script>function  mDown (obj) {obj.style.backgroundColor= "#1ec5e5" obj.innerhtml= "Release mouse button"}function  mUp (obj) {obj.style.backgroundColor= "Green" "; obj.innerhtml=" Press mouse button "}</script>
(2) Key code   (two methods available)


style= "color: #ffffff; width:90px;height:20px;padding:40px;font-size:12px;" > Click here </div>

Use the HTML DOM to assign events--onmouseover and onmouseout, onmousedown and onmouseup