<! DOCTYPE Html>"Utf-8"/><title> Replace the font background color when the mouse is pressed, and restore the default color when lifted. </title><style>. Xuexi{width:200px;height:120px;background: #abcdef; border:1px solid Green;}</style><script>function DownClick () {Console.log ("onmousedown"); varWoaixuexi=document.getelementbyid ("Woaixuexi"); Woaixuexi.style.background="Red"; } function UpClick () {Console.log ("onmouseup"); varWoaixuexi=document.getelementbyid ("Woaixuexi"); Woaixuexi.style.background="Blue"; } function Reclick () {Console.log ("onclick"); varWoaixuexi = document.getElementById ("Woaixuexi"); Woaixuexi.style.background="Green"; }</script>"Woaixuexi"onmousedown="DownClick ();"onmouseup="UpClick ();"onclick="Reclick ();" class="Xuexi"></div></body>Code Analysis:
1, when the Onmousedown,onmouseup,onclick is simultaneously acting on an element node, the order of execution is onmousedown,onmouseup,onclick;
2, OnMouseDown: Is the event triggered after the mouse press;
OnMouseUp: Event triggered when the mouse is lifted;
OnClick: Event triggered by mouse click (contains two actions, and two processes are pressed and lifted.) )onclick = onmousedown + onmouseup;
Onmousedown,onmouseup,onclick also applies to a label node element