Use these to jump around or read it all
The Concept
The Script
What You’ve Learned
Your Assignment
The Concept
Well, now you’ve got the basic hang of Event Handlers. So let’s take a primer and see a few more in action. They all work basically the same way. As long as you know the format of the event and think through the logic of getting it to run, then you’ll be able to place these all over your pages.
The Scripts and Their Effects
The onClick Command
You already know onMouseOver causes an event when
the mouse is passed over a link. Well, if passing over the link causes the event, then clicking on the link should be just as successful when you use the onClick Event Handler.
I’ll use the alert method to show this one off. If you did the assignment from the last primer, you know how it is used. But just for memory’s sake, the alert format goes this way:
So, following the same pattern as the onMouseOver, we get this:
<A HREF=”https://www.htmlgoodies.com”
onClick=”alert(‘You are off!’);”>
Click Here</A>
And here’s what it gives us (when you click, the link will work):
Here’s a good piece of knowledge to keep handy. See above how I wrote “You are” instead of “You’re”? There’s a reason for that. If I had written “You’re”, the apostrophe would have been seen by the browser as the end of the text, not as I intended it. Error.
The onFocus Command
This is a great Event Handler that allows you to create action when your reader focuses on one item on the page. This will work for FORM “select” boxes, “text” boxes, and “textarea” boxes. (See
here if you don’t know what these things are.)
Here’s an example:
<FORM> <INPUT TYPE=”text” SIZE=”30″ onFocus=”window.status=’Text in the status bar’;”> </FORM> |
And here’s what you get (click on the box and watch the status bar):
The onBlur Event
If you can focus on an item, then you can “blur” or lose focus on an item. The onBlur Event Handler allows you to alert a user to the fact that they have changed their answer. Its usage doesn’t seem to come up a great deal, but here’s an example. I have a text box below that has text in it. Please change the text, then click off the box, as if you were going to the next item in the list.
Neat, huh? You can pretty much guess at the code, but here it is anyway:
<FORM> <INPUT TYPE=”text” SIZE=”40″ |
The onChange Command
This command works much the same as the onBlur command above. It’s main function is to work as a “check” mechanism. When we get into forms, this will make more sense. Think of this as an event that makes sure the user fills in what you are asking for. The example will look much the same as the onBlur, but its function is different.
|
<form> <INPUT TYPE=”text” SIZE=”40″ |
This is what it gives you…
The onSelect Event
This works the same way as the three above, denoting that something has been done to a “text” or “textarea” form element. Except this one reacts when something inside the box has been highlighted.
The onSubmit Command
This is the one everyone seems to want to lay their hands on. This command allows you to make something occur when you click on the submit button. The reason people want this is because they want that wonderful effect of the user clicking on the submit button and then the page changing to say Thanks for writing.
Here’s the format:
|
<FORM> <INPUT TYPE=”submit” </FORM> |
And here’s what you get (click the submit button):
Now, there are a few new commands up in there, so let’s look at what we have. The format looks similar, but it’s a little backwards.
parent.location is the basic format for setting up a link to another page. It would seem that parent would be the object and location the method. But it’s not. In this case, parent is a property of the browser window and location is the object that is to appear in that window. The URL is representative of the method. That said, I always keep it straight by simply remembering that the format “parent.location=” means a link.
The onLoad and onUnLoad Commands
There is not an example for these two as they will each have their own primer later on, but they are Event Handlers so they need to at least be mentioned here.
Both of these will appear in the HTML document’s <BODY> command. They act as a trigger to make something happen when the page loads or when the page
“unloads” (technical term for a user clickng to leave the page). These two Event Handlers will become quite important when we start talking about functions.
What You Have Learned
Your Assignment
For this assignment, I want you to create a form that has some interaction with the user. (Again, you will need to know about
form commands to do this.)
The form should have three elements: A text box that asks for the person’s name, two checkboxes that ask if the person prefers chocolate or vanilla, and then a submit button. Now, here’s what I want to happen with each item:
- The text box should print “Put your name in here” in the status bar when the user fills it in.
- The two checkboxes should write “You have chosen —” indicating their choice in the status bar.
- The submit button should pop up an alert thanking the user for filling out the form.
Answer (this will open a new window)
The Concept
The Script
What You’ve Learned
Your Assignment
