In our last two sections we looked at properties and methods of the window object. In this installment, we’ll wrap up our study of the window object by learning how to use the most common of the window event handlers. We’ll also take a look at some links for additional help.
An event handler is a JavaScript keyword that allows a script to perform certain
functions based on events on a Web page. Anytime something happens — a
page loads, a link is clicked, the mouse moves — an event happens. Many
times it’s desirable to control these events. This can be done by using event
handlers, which permit a script to interact with the visitor. A Web page
can be more personable when events are performed based on actions taken by the
individual visitor. This makes the page much more interesting than a static
HTML document.
Think of the event handler as it’s written. Using the onLoad
event handler, you could say, “On loading the Web page, run the following
JavaScript function when it’s completed.”
(Note: The capitalization of the actual event handler is
optional, except when using XHTML. It can generally be written as “onload” or
“onLoad.” For our purposes, we’ll use the latter format.)
Event handlers are usually placed in a form element, the opening body
element, or in a link element. Occasionally they’re used within the script itself.
Let’s take a look at the ones commonly used with the window object.
This event handler is used to execute a script after a page has fully loaded.
That includes loading all scripts, graphics, plugins and Java applets. This is
different than what we’ve done up to now. When we called an alert
window from a script located in the head section while the document
was loading (“parsing”), the document stopped loading and ran the script, which
then loaded the alert window. Once the alert window was closed, the document continued
to load. Often JavaScripts are executed as the page is parsed.
Beginning at the top of the Web page, scripts will be executed as they are encountered
by the browser. Using the onLoad event handler, the entire page and
all of its related files and components are loaded before the function listed
in the onLoad event handler is executed.
This particular event handler is generally used within the body or frameset tag. An example would be:
<body onLoad="alert('This page has finished loading!)"
(While this will work just fine, there are more effective uses for the onLoad
event handler than just for an alert box. We’ll take a look at them later in
our studies.)
A better way to use the onLoad event handler would be to put
it in an external file, with a link to the file placed in the head of the page.
That way it can easily be changed and will not be mixed with the HTML code.
Actually, you should place all of your JavaScript code in an external file.
You’ll need to make sure that there are no duplicate function names or variable
names so as to eliminate any problems. Place the onLoad event handler
at the end of the file:
window.onload=functionName;
If you have more than one onLoad event handler, you will need
to call them a little differently. If you were to just list them all as the
example above, only the last one would execute, e.g.:
window.onload=functionName1;
window.onload=functionName2;
window.onload=functionName3;
In the example above, only the window.onload=functionName3; would
run. This is because each succeeding line would replace the previous one. To
run more than one onLoad event handler, you need to list the calls
within a function. One way of doing that is shown below:
function start() {
runFunction1();
runFunction2();
runFunction3();
}
window.onload = start;
In the example above, once the window has loaded, the function named start will execute and run the other functions listed. (Be sure to include a link to the external file in the head section of page.)
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
