Although you can start functions when your page loads, many times you'll want to start functions when a user clicks a link, enters a form, scrolls, moves his or her mouse over an object, or does something else. These actions are called events. You can set specific functions to run when the user performs an event. These functions "listen" for an event and then initiate the function.
Common Event Listeners
The following are common events:
Note that each event listener begins with
on and is entirely lowercase.
Adding Event Listeners
You can add an event listener directly in the HTML code in the following way:
A more common way to integrate the event listeners is by identifying the element and adding the event listener as a method. The general format for doing this is as follows:
In this example,
myelement would be a variable that refers to a specific style on your page.
Note that the word
function is written without a name because its code is specified in the code block that immediately follows.
Also note that the statement ends with a semicolon
; after the closing curly brace
Associating Events with IDs
If you have a specific ID in your web page that uniquely identifies a section, you can associate an event with that ID. Here's an example:
Adding the addEventListener Method
You can also add event listeners using a method called
addEventListener. However, this method isn't supported in Internet Explorer 8, so if you use this method, you need to add some conditional functions to check for browser functionality before running the function.
The format for adding events using this method is as follows:
In the above format, you start by adding the method to the Document object. In the parentheses, list the event listener but without the
on. (In this example, the event listener is
onclick, which is shortened to
click.) You then add the function to run. (The function is declared elsewhere.) The
false refers to an advanced, rarely used parameter for event handling.
Referencing Event Handlers
If your event handler refers to a specific element on the page, and you call your script before the element loads, the script won't work because the element isn't available at the time the script runs.
You could insert the script before the closing
body tag to ensure the elements load first, but let's say you need your script to run earlier — before the element loads. You can use the
prepareEventHandlers function to load the function when the page loads.
First, add the
Now call the
prepareEventHandlers function when the window loads:
Using this technique, the event will be loaded and ready even if it is referenced before the element it's listening for. Note that you can call the
window.onload function only once per page.
onblur and onfocus Events
onfocus events refer to the way users interact with forms. When a user clicks a form field, an
onfocus event occurs. When a user clicks out of the field, an
onblur event occurs.
Here's an example. Let's say that your HTML form has an ID called
First, get the
namefield element, and then add an event to it.
You can also add an
onblur event to take place when the user leaves the field.
You can add events that have a time delay. For example, if you want a pop-up message to appear after the user has been on the page for 10 seconds, you can do this through the
For example, let's say you have a simple message:
However, you don't want this message to appear until the user has been on the page for a while. You delay the action through the
setTimeOut function has two parameters. The first allows you to call a function (which we declared earlier), and the second refers to the timer. The function will not be called for 8000 milliseconds.
There are other timer functions, such as
setInterval, that initiate the function at the interval you specify.
I'd Rather Be Writing Newsletter
Get new posts delivered straight to your inbox.