JavaScript Tutorial: JavaScript Events

An event is something that happens. Events in JavaScript usually happen when a website visitor, or user, does something. It may be something as simple as moving the mouse. When events happen, Event Handlers react to the events. For instance, when you click a link on a web page, an event handler takes you to the link that has been specified.

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.

Let's write another JavaScript. This will be an event:

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:

But what we did to turn this into JavaScript is add additional information to the <a href> tag. The tag above, the HTML for a link, is our object. The first JavaScript element we added was onMouseOver. This is the event handler. The event is when the user actually moves the mouse over the link for Home.

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:

This JavaScript code is placed inside the body tag of the HTML code. onLoad is the event handler, so when the page loads, it looks for the object, which is the window, checks to see if there is a status bar and finds one, and then assigns a string to it, which in this case is the words Welcome Aboard in the status bar.

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:

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.

By now, these JavaScript terms should be coming to you more easily, and you should be able to recognize some of them for what they are in the code. Let's learn a new term, which is unLoad. This is an event handler, and the event is when a page is closed, or left by the user. When the web page unloads in the browser window, something will be triggered. This is often used to open popup windows and such.

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.

Look at it this way: A user comes to your page. They type something into a form on your page. That form's input box has the focus of the browser. The user hits the submit button for that form. The input box loses focus, and this is called onBlur in JavaScript terms. The focus is now on the button, which is onFocus.

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.

Previous	Next

  JavaScript Tutorial: An Introduction to JavaScript
  The Basics of JavaScript
  JavaScript Events
  JavaScript Variables and Arrays
  JavaScript Statements
  JavaScript Functions and Methods
  JavaScript Errors
  JavaScript Food Chain
  Writing JavaScript Code
  JavaScript Object Reference
  JavaScript Events Reference
  JavaScript Functions Reference
  JavaScript Math Object Reference
  JavaScript Array Object Reference
  JavaScript String Object Reference
  JavaScript Date Object Reference