Event handlers are methods which respond to certain actions the user makes. For example, if you have a button in your web page it would be nice to have it do something when it is clicked.
This is not an exhaustive list of event handlers, for that read the Elated list of event handlers.
The JavaScript onClick event handler allows the designer to have the button trigger some javascript code when it is pressed. For example, the following code creates a HTML button which includes an onClick event handler. In this instance the result of the button click will be an alert box appearing and reading "Hello".
<input type="button" onclick="alert('Hello');" value="Say Hello" />
See also onDblClick, onMouseDown and onMouseUp.
The onChange event handler tracks changes made to targeted elements of the web page. This method is commonly used with forms to check that entered data is of an appropriate nature.
Below is an input field which uses an onChange event handler. In this case all that the code will do is accept whatever is entered into the input field and then add it to a message printed into a new HTML page which will replace this one (just refresh the page to get this text back after you you have tried it out).
This example will not work in Opera.
<input type="text" onchange="document.write('You typed: ' + this.value);" />
See also onFocus, onBlur, onReset and onSubmit.
The onMouseOver event is triggered when the user moves the mouse pointer over the targetted element. In the following example an alert is triggered by moving the mouse pointer over the highlighted block.
<div id="block" onmouseover="alert('you tickled me!');"!>Tickle me</div>
See also onMouseOut and onMouseMove.
The onSubmit event handler works differently from other event handlers. To start with it should only ever be used when coding HTML <form> tags and secondly it needs to return a boolean value (true or false) to either allow or prevent the submitting of the HTML form it is attached to. This looks something like this:
<form ... onsubmit="return yourFunction();">
In this case the function yourFunction needs to return a value of either true or false. This can be done by adding the following line at the end of your function if the form has passed and is okay to send:
return true;
... and the following if the form has not passed validation:
return false;
... so the function would look something like this:
function yourFunction() {
// check if something is the case
if(something > somethingelse) {
// if it is, throw an alert to let the user know and return false
alert('something is not smaller than something else');
// returning false at this point ends the function here and
// the code following the if block does not get run
return false;
}
// this code will only run if the if block above does not execute
// as a result this function will always return either true or false
return true;
}
Now open the event handlers exercise page and work through it.
Use this page and the Elated list of event handlers to help you.
You may also use the JavaScript scratch pad to try out code quickly.