After the resounding success of the first installment, it's time for part two of my Journeys in JavaScript series, where I lay bare my personal trials and tribulations learning proper scripting.
Later this week I'll be looking at variables and arrays, but first lets take a look at event handlers.
JavaScript event handlers are essentially ways in which we can make a user action activate some sort of scripting. There are many different types of user interaction. It might be clicking a link or submitting a form, or it could just be hovering over part of the page, or even simply loading the page. If we associate JavaScript with these actions we can change their traditional behaviour and do lots of cool stuff. These interactions are known as event handlers.
JavaScript event handlers
Here's a quick list of some of the most common event handlers and when they take effect.
| Event Handler | Activation |
|---|---|
| onload | When the page loads |
| onclick | When an element is clicked in the browser |
| onmouseover | When the mouse cursor is hovered over an element |
| onmouseout | When the mouse cursor is moved away from an element |
| onfocus | When a form element is clicked, it is said to have received focus. |
| onblur | When the form element loses it's focus (somewhere else on the page is selected) it is blurred. |
The above table demonstrates the onmouseover and the onmouseout handlers. As the mouse hovers over the table cells a script is called, in this case changing the background colour of the cells. When the cursor moves away from the cell it returns to it's original colour.
Lets look at a simple example where an event handler can be used to generate a pop up box (known as an alert box).
<a href="index.html" onclick="alert('Only me!');">Who goes there?</a>
Will give us:
The first thing you'll probably notice is that we don't have any script tags. This is because event handlers themselves are not scripts, they just contain script, and they're embedded inside normal HTML tags, affecting it's behaviour. This particular handler is triggered when the link is clicked.
When the link is clicked the alert function is triggered, generating a pop up box with some text of our choosing.
You probably noticed that when you close the pop up box you jump back to the home page of the site. This is because the link is still active. Annoying isn't it. If we want to disable the default function of an event handler we can add some extra code to our event handler.
<a href="../index.html" onclick="alert('You aint goin nowhere');return false;">Stay Put</a>
Will give us:
This time you remain on the current page because we've stopped the default action of the link with the return false;. If return true; is used then the default action would occur as normal. Both are used in different situations but setting return false; seems very common, especially where links are concerened.
Event handlers can be used in all sorts of ways and are a powerful tool in creating user interaction with a web page.
.