Using Events

Document Object Events

Syntax: document.event_name="someJavaScriptCode"

Event	Description
onClick	Executes some code when a Click event occurs
onDblClick	Executes some code when a Doubleclick event occurs
onFocus	Executes some code when a Focus event occurs
onKeyDown	Executes some code when a Keydown event occurs
onKeyPress	Executes some code when a Keypress event occurs
onKeyUp	Executes some code when a Keyup event occurs
onMouseDown	Executes some code when a Mousedown event occurs
onMouseMove	Executes some code when a Mousemove event occurs
onMouseOut	Executes some code when a Mouseout event occurs
onMouseOver	Executes some code when a Mouseover event occurs
onMouseUp	Executes some code when a Mouseup event occurs
onResize	Executes some code when a Resize event occurs

One of the primary ways in which JavaScript makes HTML documents dynamic is through events. An event is a specific circumstance that is monitored by JavaScript. Code that executes in response to an event is called an event handler. Event handler names are the same name as the event itself, but with a prefix of on. For example a click event is onClick. To demonstrate the onClick, create a form with a button. When the button is clicked, use the alert() method to display a message to the screen.

onClick

click here to see the demo.

When a document loads in a browser window, the load event handler is onLoad. And when you leave the page, the unload event or onUnload event handler is called.

Let's go back to our Jack and the Bean Stalk example. When the user leaves the page, display a farewell message. This time add an onUnLoad event handler to the body tag to diplay the message.

onUnLoad

click here to see the demo.

Link Events

Links also have events, like click, mouseOver and mouseOut. So lets add some events to links.

onClick

1) click a link that displays an alert message

notice the "return false;"
change it to "return true;"

Notice in the example the that the literal string being passed is contained in single quotations marks, since the alert() method itself is already enclosed in double quotation marks.

click here to see the demo.

2) create a link that calls a function

notice the "return false;"
change it to "return true;"
remove the "return true;"

click here to see the demo.

3) create a link that uses the confirm() method to let the user decide true or false

click here to see the demo.

onMouseOver and onMouseOut

4) mouse over a link that puts a message in the window status bar

notice the "return true;"
change it to "return false;"

click here to see the demo.

5) change an image

Now that we have seen the onMouseOver event, let's use the information we know about the DOM to change the source of an image when we move the mouse cursor over then off the link. We need two images. First create the HTML for the link and the image. Add the MouseOver event that will change the source of the image. Then add the MouseOut event that will change it back.

Add the MouseOver event to change the image source.

onMouseOver="document.images[0].src=image02.gif">

Add the MouseOut event to change the image source back.

onMouseOut="document.images[0].src=image01.gif">

click here to see the demo.

We could also create an array and fill it with the names of some images, and when we click a button we randomly display an image. Use math.random() to generate a floatimg point number between 0 and 1. Then multiply that number by the number of images in your image array. If you have three images, and the math.random() method returns 0.19599372296496154. If we multiply that by the number of images 3, we would get 0.5879811688948846. We could then use math.floor() to get the whole number 0. Remember array's start with index 0.

so document.images[0].src=img[0]
is the same as document.images[0].src=img[imageNum];

click here to see the demo.

Now this works great, but what if we had several images on the page, and each time you moused over an image you wanted it to change, then change back when you moused out? Lets go back to our knowledge of functions. Why not create a function that could swap the images? All you really need to know is the image number and its source. So, lets create a function that accepts two parameters (imgNum, imgSource). Remeber that images start with 0.

function chg_image(num,src){
document.images[num].src = src;
}

click here to see the demo.

What if we had a site that was always changing? We never really knew what image would be first second third etc? Then it would become cumbersome to have to remember what order they were, and if the order changed we would have to re-lable our image number. What a nightmare!!! So, lets go back to the DOM. According to the DOM we can also get the properties of an image object by using it's NAME.

So, lets give each image a name. Then we can modify our function to accept an image name instead of a number. Then we never have to worry about what order the images are in.

The image name can be used in two different ways. It can be used as a subscript or the name can be used instead of images[x].

function chg_image1(name, imgName){
	var imgLib = "/images/";
	//document.images[img2].src="character0.gif";
	document[name].src = imgLib + imgName;
}
function chg_image2(name, imgName){
	var imgLib = "/images/";
	//document.img4.src="character0.gif";
	theImage = eval("document." + name)
	theImage.src = imgLib + imgName;
}

click here to see the demo.

Image Maps

Remember image maps have hot spots. These hot spots also have events like mouseOver and mouseOut. We can create an image map and use the mouseOver and mouseOut events to change the status bar.

click here to see the demo.