Javascript Events
The absolute coolest thing about Javascript is the ability to create dynamic web pages that increase user interaction, making the visitor feel like the website is almost coming alive right before their eyes.
Every element on a web page has certain events which can trigger JavaScript functions. For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags.
A few example of events:
- A mouse click
- The web page loading
- Mousing over a hot spot on the web page, also known as hovering
- Selecting an input box in an HTML form
- A keystroke
Javascript has predefined names that cover numerous events that can occur, including the ones listed above. To capture an event and make something happen when that event occurs you must specify the event, the HTML element that will be waiting for the event, and the function(s) that will be run when the event occurs.
Event Handlers
New to HTML 4.0 was the ability to let HTML events trigger actions in the browser, like starting a JavaScript when a user clicks on an HTML element. Below is a list of the attributes that can be inserted into HTML tags to define event actions.
FF : Firefox, N : Netscape, IE : Internet Explorer
Attribute |
The event occurs when... |
FF |
N |
IE |
onabort |
Loading of an image is interrupted |
1 |
3 |
4 |
onblur |
An element loses focus |
1 |
2 |
3 |
onchange |
The content of a field changes |
1 |
2 |
3 |
onclick |
Mouse clicks an object |
1 |
2 |
3 |
ondblclick |
Mouse double-clicks an object |
1 |
4 |
4 |
onerror |
An error occurs when loading a document or an image |
1 |
3 |
4 |
onfocus |
An element gets focus |
1 |
2 |
3 |
onkeydown |
A keyboard key is pressed |
1 |
4 |
3 |
onkeypress |
A keyboard key is pressed or held down |
1 |
4 |
3 |
onkeyup |
A keyboard key is released |
1 |
4 |
3 |
onload |
A page or an image is finished loading |
1 |
2 |
3 |
onmousedown |
A mouse button is pressed |
1 |
4 |
4 |
onmousemove |
The mouse is moved |
1 |
6 |
3 |
onmouseout |
The mouse is moved off an element |
1 |
4 |
4 |
onmouseover |
The mouse is moved over an element |
1 |
2 |
3 |
onmouseup |
A mouse button is released |
1 |
4 |
4 |
onreset |
The reset button is clicked |
1 |
3 |
4 |
onresize |
A window or frame is resized |
1 |
4 |
4 |
onselect |
Text is selected |
1 |
2 |
3 |
onsubmit |
The submit button is clicked |
1 |
2 |
3 |
onunload |
The user exits the page |
1 |
2 |
3 |
| 
