[JS]Understanding event handlers, "event handlers" in JavaScript

rooney · May 22, 2006, 08:43:11 AM

Understanding "event handlers" in JavaScript

So, what are event handlers? Very powerful and useful! They are JavaScript code that are not added inside the <script> tags, but rather, inside the html tags, that execute JavaScript when something happens, such as pressing a button, moving your mouse over a link, submitting a form etc. The basic syntax of these event handlers is:

name_of_handler="JavaScript code here"

For example:

onClick="alert('hello!')"

Event Handlers:

onclick: Use this to invoke JavaScript upon clicking (a link, or form boxes)
onload: Use this to invoke JavaScript after the page or an image has finished loading.
onmouseover: Use this to invoke JavaScript if the mouse passes by some link
onmouseout: Use this to invoke JavaScript if the mouse goes pass some link
onunload: Use this to invoke JavaScript right after someone leaves this page.

staff · May 22, 2006, 08:43:26 AM

onClick Event handler

Ok, lets see how the onclick event-handler can help us. Remember, any event handlers are added inside html tags, not inside <script></script> ( there is an alternate way, which will not be discussed in this section). First of all, does that mean we can simply dump event handlers anywhere within any html tag? Noooo! onClick handlers execute something only when users click on form buttons, check boxes, etc, or text links, therefore they can only be inserted in these tags, for example, <a>,<input type=..>. Lets see an example of an onClick event handler:
.

Click here for output:

<script>
function inform()
{
alert("You have activated me by clicking the grey button! Note that the event handler is added within the event that it handles, in this case, the form button event tag")
}
</script>

<form>
<input type="button" name="test" value="Click me" onclick="inform()">
</form>

The function inform() is invoked when the user clicks the button.

All examples you have seen up to now use this handler, the onClick handler, to illustrate the examples. Ok, let me show you another example that will make use of the checkbox element.

Try this: (it will change the background color of a document interactively)

<form name="go">
<input type="checkbox" name="C1" onclick="document.bgColor='lightblue'">
<input type="checkbox" name="C2" onclick="document.bgColor='lightyellow'">
input type="checkbox" name="C3" onclick="document.bgColor='lightgreen'">
</form>

I've put the actual demo of this example onto another window. Click the button to see it.

Click here for output:

We used the onclick handler to change the background color. Notice that we just wrote in plain English the name of the bgcolor...you can do that, for most colors.

This is a crudely implemented bgcolor changer. Whenever you select additional checkboxes, the previous one stays checked. You can use buttons or radio boxes to alter that.

District_posters · May 22, 2006, 08:43:40 AM

onLoad Event handlers

The onload event handler is used to call the execution of JavaScript after a page /frameset /image has completely loaded. It is added like this:

<body onload="inform()"> //Execution of code //will begin after the page has loaded.

<frameset onload="inform()"> //Execution of code //will begin after the current frame has loaded.

<img src="whatever.gif" onload="inform()"> //Execution of code will begin after the image //has loaded.

Lets see an example of an onload handler:

<html>
<head><title>Body onload example</title>
</head>
<body onload="alert('This page has finished loading!')">
Welcome to my page
</body>
</html>

As soon as the page has finished loading, it will alert you saying so.

sed · May 22, 2006, 08:43:49 AM

onMouseover,onMouseout

These handlers are used exclusively with links.. The following example writes something to the status bar (at the bottom of your screen) whenever a mouse cursor hovers over the link, and deletes it when the mouse moves away.

Output: Dont't Click Here

<a href="blabla.htm" onmouseover="status='Do not click here, its empty!';return true" onmouseout="status=' '">Don't Click Here</a>

Several new concepts arise here, so I'll go over each one of them.

the "status" refers to window.status, which is how you write to the status bar.

Note that instead of calling a function, we wrote directly the JavaScript code within the handler :"status='Do not click here, its empty!';return true" This is ok, but it is important that you separate statements with ;. You could have, alternatively, written everything up until "return true" as a function and then calling it:.
function writestatus()
{
status="Do not click here, its empty!"
}
and then: onmouseover="writestatus();return true"

So you're thinking, "what is return true?" Good question. You need to add this line of code to set the status property with the mouseover effect. Uh? I know, don't worry so much now, it really isn't important. Just remember you need this to "activate" the status onmouseover effect.

onmouseout="status=' '" clears the status after the mouse leaves the link. Whenever the mouse moves away from the link, the status bar is "reset" again. If you don't insert this code, the status bar will still have those words you entered into it even after taking away the cursor.

Whenever we have nested quotations, the inner ones are always singled. Ie:
onclick="document.write('hello')"

imad_sleem · May 22, 2006, 08:44:37 AM

onUnload event handler

onunload executes JavaScript immediately after someone leaves the page. A common use (though not that great) is to thank someone as that person leaves your page for coming and visiting.

<body onunload="alert('Thank you. Please come back to this site and visit us soon, ok?')">

There are other event handlers, many belonging to forms. These event handlers are discussed in the tutorial Accessing and validating forms using Javascript.

For convenient reference, here is a complete list of all the event handlers in JavaScript:

table found at You are not allowed to view links. Register or Login
Event Handlers Can be used with these tags:
onAbort
onBlur
onclick

.
onChange
onError
onFocus
onload
onmouseover
onMouseout
onReset
onSelect
onsubmit
onUnload

images
windows, all form elements, frames
buttons, radio buttons,
checkboxes, submit buttons,
reset buttons, links
text fields, textareas, select lists
windows, images
windows, frames, and all form elements
body, images
areas, links
links
forms
text fields, textareas
submit button
body

-

Ryan's District Boards

News:

[JS]Understanding event handlers, "event handlers" in JavaScript

rooney

staff

District_posters

sed

imad_sleem