JavaScript Tutorial 4 Event Handlers

Let's get started writing your own interactive web page. What do we mean by interactive? We mean that when someone comes to your page, they do something and then something happens . That something they do is called an Event. For example, move your cursor over the words "PUT YOUR CURSOR OVER THIS" just below:

You see? Events are what makes JavaScript so fun and powerful. With JavaScript your web pages can RESPOND to input by other users.

Now Click this button. It will insert a script that we'll use for this tutorial into your document.

Go look in CodeRunner. If there isn't a bunch of new stuff towards the top, click the button again. Don't worry if you don't understand that script -you're not supposed to yet.

OK. Now that we've done that, let's start talking about events. Events make things happen. In fact, you just triggered an event. When you clicked the button just now, you triggered an event that caused my JavaScript to insert some stuff into CodeRunner . We'll talk about that particular event in a little bit, but first, let's look at some others. For the rest of this Tutorial, when I tell you to make your document look like something, assume that I want you to leave the stuff that I just inserted at the top, and put everything you type below it.

Type this into the text area below:

Click 'Preview'. When your document comes up, move your mouse over the image that is displayed. Pay close attention to what happens.

Did you see the image change? If not, go back and try it again.

Here's what happened. When you moved your mouse over the image, an event was triggered that caused the image to change. Let's analyze the code:

Here is how it works in English:

"When someone moves their Mouse Over the image then it executes the rollon script."

In Black you see a basic anchor tag Container. It makes the anchor send you to some document with the URL "whatever.html" (which doesn't actually exist) when you click.

In green you see something new. This green part - onMouseOver - is the event handler. (most people just call Event handlers... Events) Notice that onMouseOver is used as an attribute of the Anchor tag. onMouseOver is one of the event handlers available to anchor tags. What it does is whenever the user places his mouse pointer over the objects contained in the anchor tag, it performs the function in green.

In blue is the statement that tells the browser what to do when the onMouseOver event occurs. In this case, it calls the script that was inserted into your document by us. But that's not important. What is important is that you realize that events cause something to happen.

Let's try another. Add the bold stuff:

Go try it. Run your mouse pointer both over and outside of the image this time. Pay close attention to what happens.

This time, when you put your mouse over the image the same thing happened. But, when you moved your mouse outside of the image, it changed back. This was caused by that new event handler - onMouseOut - that you entered into that anchor tag. This event is triggered when the mouse pointer leaves the objects contained by the anchor tag. Get It?

We're going to talk about a whole bunch of events before we're done here, and I want you to remember something:

All Event Names Start With 'on'

That is, they look like 'onSomething'.

Well, actually I lied. There is one (1) event that doesn't start with 'on', and it belongs to the anchor tag. That's because the anchor tag already handles clicking events. So, before we move on, let's get that one out of the way.

OK. Type this into the text area below:

Go try it out. This time, click on the image and see what happens.

What this event does is cause something to happen when you click on an object contained by the anchor tag. Let's analyze the syntax:

This reads in English as:

"When someone clicks on the image, go to the JavaScript function rollon and execute it."

You treat this event just as you would a normal anchor link. But, instead of placing a URL in the 'href' attribute, you place what is in purple and blue. The purple part tells the browser that instead of linking to some other URL, you want to execute some JavaScript.

The blue part is the JavaScript stuff that you want to execute.

We've pretty much covered the anchor tag events for JavaScript 1.1. The events available to the Anchor tag are:

onMouseOver
onMouseOut
The natural clicking event of the Anchor tag to execute JavaScript.

So, let's move on to something else. Let's talk about input buttons (you'll learn a lot more about input buttons later). Make your document look like this:

This is going to make a button input (if you don't already know how to make these, you'll learn in Tutorial 6) that, when you click it, it will do something. Go try it - pay attention to the image when you click.

Hey!! It changed the image!! Cool huh? onClick is an event that can be used for the button input type. So, when you click the button, the onClick event is triggered, causing something to happen. Do ya get it?

OK. Make your page look like this:

This makes a text input (again, we'll cover making these later). Go try to type something into it.

You can't!! That's because every time you try to place your cursor into the text field, the onFocus event is triggered, which in turn causes something to keep your cursor from being able to type into the text field.

Focus means to bring some object into view. Blur means to take an object out of view. When you click on a window on your computer it focuses and the other windows blur.

Why would you want to ever do this? Well, suppose that you want the value of a field to only be set by JavaScript (by you). For example, do you remember when you first saved your page? You chose a city under which it will eventually be listed on UserWorld. At the top of that screen were some text fields that displayed the Country, Area, and City that you had chosen. The values of those fields were set using JavaScript. If you tried to type into those fields, you couldn't.

We did this because we didn't want people typing obscene things into those fields, making their page be listed as being somewhere like "Butt, Montana" or worse. Instead, we wanted them only to be listed in places that we had approved in the interest of the professional appearance of our site.

We've talked about events, and you get the idea. All of the events start with 'on' except one - the anchor click event. Here's a list of all of the events along with the type of objects that they can be used with. You don't yet have the knowledge to use these events, but for future reference, here they are:

**Event Handler:** **can be used in:**
onBlur	select, text, textarea
onChange	select, text, textarea
onClick	button, checkbox, radio, link, reset, submit
onFocus	select, text, textarea
onLoad	window
onMouseOver	link
onMouseOut	link
onSelect	text, textarea
onSubmit	form
onUnload	window

We will discover later (DHTML labs) that just about every object in Internet Explorer allows supports about every event and that Netscape handles on events in an event object. For now, since we are learning those parts of javascript which work in BOTH browsers the above list is accurate.

Save your work.

See you at the next lab!