Event handlers often use variables and methods to perform the task that they have been told to do. Event handlers are assigned to objects in the HTML code. In our example above, there was no event. The words appeared on the web page when it was loaded. The user didn’t have to take any action, other than arriving on the web page.
<a href="http://www.yourwebpage.com" onMouseOver="window.status=’Return to Homepage’; return true">Home</a>
Now this script will change the status bar of the browser window when the user puts their mouse over the link on the page. Let’s look at the elements.
First, we designate the URL, which is http://www.yourwebpage.com, and we use common HTML for this, so that the code looks like:
Next, we are telling the script what we want to happen when the user moves his or her mouse over the link. We are defining another object, the window. We are also addressing a property of the window, the status bar. We are telling the status bar to say ‘Return to Homepage’ and this is to happen when the user runs their mouse over the link that says Home. We then put a semicolon, because that is the end of that specific task or command.
But we haven’t finished yet. There is more to this script. The words ‘return true’ are there. Return true just tells the browser that if there is a default action that should occur, that the action should take place. In this case, the default action when the link is clicked is for the browser to load the home page.
But this isn’t always the case. In this example, for instance, return true tells the script to look for a status bar, and if it finds one to run the script.
Also note that objects can be presented with either methods or properties, separated by a dot. In the element window.status, window is the object, and status is the property. In the element document.write, the document is the object, but write is not a property. Instead, it is a method.
Events are not always user dependant. There is a way to cause an event to occur, without the user doing anything. The event handler for this is onLoad, which means that the event is the page loading in a web browser.
Let’s take a look at some onLoad code:
<body onLoad="window.defaultStatus=’Welcome Aboard!">
Another user driven event handler is onClick. Just as it sounds, this event handler wakes up and starts doing things when a user clicks on a specified object. Aside from learning about the onClick event handler, you are also about to learn how to generate a button to go along with it. Here is the code:
<button onClick="window.alert(‘Life Is Good!’); return false;">Click It!</button>
We have a new element here – a button tag. When the button is clicked (event), the onClick (event handler) will create an alert box (object) which will say Life is good (string). We’ve made sure the button will simply say Click It! Now, note that we’ve said that the alert box is an object. It is – but so is window. In this case, the window is an object, and alert is both a method and an object.
Other common event handlers are onBlur, onFocus, onSelect, and onChange. These event handlers are usually used with HTML forms, such as forms that users fill out on your website.
Let’s first look at onFocus and onBlur. When a user interacts with a web page, the browser that is displaying that page focuses on what the user is doing. Users interact with web pages by using the mouse. When a user clicks a link, that link has the web browsers focus.
The event handler onChange comes into action when the user changes something on the page, such as the text in an input box. The other event handler, onSelect, comes to life when the user selects something. For instance, they might select an option with a radio button.
There are numerous other event handlers that can be used to increase the Interactivity of a user with a web page. For instance, if you have an image of a button on your webpage, you can use the onClick event handler with the mouseDown and mouseUp event handlers. This combination will make a graphic appear to be depressed when someone clicks the mouse down on it, and rise back up when they release the mouse button.
You will see how all of these event handlers are used later on, and you will learn about some additional event handlers as well. Now that you know more about event handlers, let’s move on to the next topic, which is a variable.