Basics : Events - Javascript Tutorial - EchoEcho.Com

JavaScript Basics :

EVENTS

Events are actions that can be detected by javascript.

An example would be the onmouseover event, which is detected when the user moves the mouse over an object.

Another event is the onload event, which is detected as soon as the page is finished loading.

Usually, events are used in combination with functions, so that the function does not start until the event happens.

An example would be a function that would animate a button.

The function simply shifts two images. One image that shows the button in an "up" position, and another image that shows the button in a "down" position.

If this function is called using an onmouseover event, it will make it look as if the button is pressed down when the mouse is moved over the image.

The following are the most important events recognized by javascript:

Event	Detected when	HTML tags
onfocus=""	Form field gets focus	select, text, textarea
onblur=""	Form field looses focus	select, text, textarea
onchange=""	Content of a field changes	select, text, textarea
onselect=""	Text is selected	text, textarea
onmouseover=""	Mouse moves over a link	A
onmouseout=""	Mouse moves out of a link	A
onclick=""	Mouse clicks an object	A, button, checkbox, radio, reset, submit
onload=""	Page is finished loading	body, frameset
onunload=""	Browser opens new document	body, frameset
onSubmit=""	Submit button is clicked	form

Events are used for two main purposes:

To perform a function upon detection of the event,

To show a popup box upon detection of the event.

Below is a brief description of the main purposes for each event.

onFocus, onblur and onchange are mainly used in combination with validation of form fields.

Lets say you had a function called validateEmail() that would check to see if an entered email address has an @ in it, and if it has a meaningful end, such as "com", "net" or whatever. Furthermore, suppose the user could enter his email address in a form.

You would then use the onchange event to call the function whenever the user changes the content of the field:

<input type="text" size="20" onchange="validateEmail()">;

Click here to learn more about forms.
Click here to learn more about form field validation.

onload and onunload are mainly used for popups that appear when the user enters or leaves the page.
Another important use is in combination with cookies that should be set upon arrival or leaving your pages.

For example, you might have a popup asking the user to enter his name upon his first arrival to your page. The name is then stored in a cookie. Furthermore, when the visitor leaves your page a cookie stores the current date.
Next time the visitor arrives at your page, it will have another popup saying something like: "Welcome Bill Clinton, this page has not been updated since your last visit 8 days ago".

Click here to learn more about setting cookies.
Click here to learn more about popup boxes.

Another common use of the onLoad and onunload events is: Some annoying pages have a function that immediately opens several other windows as soon as you enter the page. This is a clear break of netiquette, and is not considered proper webdesign.

onsubmit is used for one major purpose: To validate all fields within a form before actually submitting it.

In the above example for onchange we showed how you can validate a single form field.

Sometimes however, the visitor might find it annoying to have validations in the middle of entering fields on a form. Rather than validating after each input, you might want the form to be validated only upon clicking the submit button.

This can be done using the onsubmit event.

Assume you made a function named checkform() that would validate entries to a form.

Now you want this function to be called when the user clicks the submit button.
If the content is not accepted by your function the submit should be cancelled.
This way nothing would be submitted unless your function accepted the content.

What you should do, is: add an onsubmit event to the <form> tag this way:

The function checkform() returns either true or false.
If it returns true the submit will take place.
If it returns false the submit will be cancelled.

Click here to learn more about forms.
Click here to learn more about form validation.

onmouseover and onmouseout are mainly used for one purpose: To create animated buttons.

You may have noticed that these events can only be used in combination with the link tag <a>.

However, the events are often more useful in combination with the image tag <img>. The trick to making the event work on an image is simply to turn the image into a link. (If the image is not supposed to actually work as a link, you could always make it link to an empty anchor, as shown in the example below).

Example: an alert box appears when an onmouseover is detected on an image:

The HTML from the example:

Note: The href="#" links the image to nowhere. If you really wanted the image to link to a page you should enter the address of the page here instead.

Click here to learn more about links and anchors.
Click here to learn more about alert boxes.

<< PREVIOUS