Javascript- Onmousedown Event Handler

The Onmousedown event handler in Javascript is an event handler that is triggered when a user places the cursor of a mouse over an element and clicks down on the mouse. The user just has to click down on the mouse and doesn't have to complete the click by releasing the mouse button.

The onmousedown event handler will be triggered when the mouse is over the element and clicked down on. This is either a left click or a right click. It doesn't matter; both will trigger the onmousedown event handler.

This can be used with practically any HTML element, such as a link, an image, a paragraph, a header, etc.

When the user places the cursor over an element and clicks down, the onmousedown event handler will trigger, and will do whatever programmed to do.

As an example, look at the image below.

It is a mars rover exploring Mar's surface.

Now place the cursor of the mouse over this image and click down. It will then show an image of the mars rover with its infrared laser. If you're interested in this feature of the mars rover, you can visit the wikipedia link here. However, this is not the point of this article. It's to learn Javascript.

Place your mouse cursor over this image and click down to see it change

This is the power of the onmousedown event handler.

HTML Code

The HTML code to create the original image above before it is converted to the version with the laser is:

<img src="/images/mars-rover-no-laser.png"
id="image"
onmousedown="changeimage()">

The <img> tag must have an id attribute, which in this case is image. It also a onmousedown event handler attached to it. When triggered, this event handler will call the changeimage() function. This changeimage() function changes the image from the mars rover with no laser to the image of the mars rover with the laser. The script for this function is shown below in the Javascript code.

Javascript Code

The script for the changeimage() function is:

<script>
function changeimage()
{
document.getElementById("image").src="/images/mars-rover-laser.png";
}
</script>

This script takes the image with an id of image and changes the src attribute so that the image changes from the mars rover with no laser to the mars rover image with the laser.

---

Second Example

A second example of the use of a onmousedown event handler is shown below, this time with a link.

When a user scrolls over the link with his or her mouse cursor and clicks down on the link, it creates an alert pop-up box stating that the user has scrolled over and clicked down on the link.

Scroll over and click down on this link

You can see again the use of the onmousedown event handler. When an element is scrolled over with a mouse cursor and clicked down on, this event handler is triggered, and we can program it so that it can do anything. In this case, it creates a pop-up alert box.

Code

The code to create the link above with its onmousedown effect is:

<a href="http://www.dropbox.com" onmousedown="alert('You scrolled over the link and clicked down')"> Scroll over and click down on this link

Since a pop-up alert box is created when you scroll down the link, it is pretty much impossible to actually click through to get to where the link is trying to redirect you. Therefore, it isn't a very practical example, just used for demonstration purposes.

Related Resources

Javascript- Onload Event Handler

Javascript- Onunload Event Handler

Javascript- Onfocus Event Handler

Javascript- Onblur Event Handler

Javascript- Onclick Event Handler

Javascript- Onchange Event Handler

Javascript- Onkeydown Event Handler

Javascript- Onkeyup Event Handler

Javascript- Onmouseover Event Handler

Javascript- Onmouseup Event Handler

Javascript- Onmouseout Event Handler

Javascript- Onreset Event Handler

Javascript- Onabort Event Handler

Javascript- Oncopy Event Handler