Learn Javascript

Mouse Events

Introduction

The most common event handlers that you will probably use to trigger your Javascript processing are those that handle mouse events. Mouse event handlers handle the running of your Javascript code when your visitors move their mouse over parts of your page or click on things.

Onmouseover and Onmouseout

The mouseover and mouseout events are triggered when your visitor moves the mouse on or off of a particular object on your page.

See how these event handler works for yourself, the following links will execute alerts when the appropriate event handlers are triggered: onmouseover onmouseout

Onclick

The onclick event is triggered when your visitors click their mouse on an object on your web page. Unlike the other mouse events the onclick event can also be triggered from the keyboard when your visitor selects the object by pressing the enter key when that object has the focus.

See how this event handler works for yourself: onclick

Onmousedown and Onmouseup

A mouse button click consists of two movements. First your visitor depresses the mouse button and then they release it. If you need to trigger different events for these two actions then you can use onmousedown and onmouseup instead of onclick. These event handlers don't get triggered by selecting the object from the keyboard though.

See how these event handler works for yourself: onmousedown onmouseup

Onmousemove

The final mouse event handler that is common to all browsers (there are some extras that are browser specific) is the onmousemove event handler which (as its name suggests) is triggered by moving the mouse cursor over the selected object.

See how this event handler works for yourself: onmousemove

Using What You Know

At last we have reached the point in this tutorial series where you can start to create your own scripts that actually allow your visitors to interact with your web page. You should now be able to understand scripts such as my Rollover Gallery and be able to create similar scripts for yourself (or at least modify existing scripts to perform slightly differently).

Past Lessons

1. Introduction
2. Decision Making
3. Functions
4. Maintain and Test
5. External Script and Noscript
6. Object Oriented Javascript
7. Loops
8. More Predefined Classes
9. Document Object Model