onmousedown and onmouseup events

Bring Mouse inside this ,
Press and hold your mouse key first , then release it

Here is the sample code.

<div id="dis1" style=" position: relative; right: 0px; top: 10px; 
 background-color: #f1f1f1; width: 250px;
 padding: 10px; color: black; border: #0000cc 2px dashed; "
 onmousedown="this.style.background='#f0f000';" 
 onmouseup="this.style.background='#90f0c0';">
Bring Mouse inside this <br>Press and hold your mouse key first , 
then release it</div>

We will check how to use onmousedown and onmouseup events to trigger various events.

To demonstrate this we have used one div layer and when Mouse is placed over it and key is pressed the event will be triggered.
We need to press the key and hold it for some time to know the difference. As long as we have pressed and holding the mouse key the background color will change as per the onmousedown event. Once we release the mouse button then the event onmouseup will take over and the event associated with it to change the background color occurred.

In above code the background color will be #f1f1f1 when page loads, then once we click and hold the left button of the mouse over this box the color will change to #f0f000. Finally the color became #90f0c0 once we release the button.
Event Handling onMouseOver and onMouseOut

Subscribe to our YouTube Channel here

This article is written by plus2net.com team.

plus2net.com