Events and Event Handling Notes


These slides explain the four basic kinds of event handling. They refer to a book (Modern JavaScript) that was formerly used as the textbook for this class, but you don't need that book to understand the slides.

The load event

Problems occur when JavaScript code tries to access parts of a web page that have not been loaded, such as the HTML document and the DOM elements it contains. For example, if JavaScript code calls getElementById("grid") to find the element with id "grid", and that element doesn't exist yet because the page hasn't finished loading yet, the grid element will return it. You can avoid that problem by not executing any JavaScript code until the load event is fired.

The load event for an HTML document is fired when the document and associated resources (images, stylesheets, and external JavaScript files) have been loaded. Suppose you want to call the function init when the document and its resources have been loaded. You can use an event property to set a load event handler for a document like this:
     window.onload = init;

Another possibility is to use the addEventListener function:
     window.addEventListener("load", init);

Event Demo

Here is a link to a small demo that shows the three phases of event handling: capturing, target, and bubbling.
Event Demo

Event propagation

Here's a link to a good explanation of event propagation:

Input elements and forms

It's important to know what kinds of HTML input elements are available in web browsers so that you can choose the best way of getting input from the user. Forms are used to send data to server-side scripts. We will use JavaScript code to directly access input elements, so we don't need to use forms. In fact, putting input elements inside a form can cause problems for accessing them with JavaScript, so be sure that you do NOT use forms in your web pages for this class. CS3660, Web Programming II, covers server-side scripting and includes working with forms.

The following two tutorials have more information about forms and input elements:

NOTE: The tutorials above include name attributes in the input elements to provide a way for server-side scripts to access the data from various input elements. When accessing input elements from JavaScript, id attributes should be used instead of name attributes.

To get data from an input element, you will usually use getElementById to get a pointer to the input element, and then use the value property of the input element. Here's an example of using JavaScript to get data from an input element:

Here's the HTML for the text field and the button:
<input type="text" id="inputText" size=20 value="hello"></input>
<input type="button" onclick="showInputText()" value="Show Input Text"></input>
Here's the JavaScript code that gets the text from the text field and displays it in an alert:
function showInputText() {
   var textInput = document.getElementById("inputText");
   var text = textInput.value;

Four models for event handling

Because there are four different ways of assigning event handlers, and more than four different terms used for those, here is a summary of those ways, along with some notes about terminology.

Inline Event Handlers

Example: <body onload="init()">
Some authors say that this way of assigning event handlers should be avoided because it mixes JavaScript and HTML and can make maintenance more difficult.

Traditional Event Handling or Event Properties

Example: window.onload = init;
Note that this JavaScript statement does not call the function init and there are no parentheses after the name of the function.

This way of assigning event handlers is simple and works in virtually every browser currently in use. However, it only allows one handler to be registered at a time.

Inline and traditional event handling are sometimes referred to as DOM Level 0.

W3C DOM Event Handling or Event Listeners

Example: window.addEventListener('load', init, false);

This way of setting event handlers allows more than one handler for the same event, and it lets you specify a phase of event handling (capturing or bubbling). However, it does not work in Internet Explorer prior to version 9.

This is sometimes referred to as the DOM Level 2 or DOM Level 3 event model.

Internet Explorer Event Handling

Example: window.attachEvent('onload', init);

The only reason for using this kind of event handling is if you need to support older versions of Internet Explorer. If you do, one good approach is to write a function that uses feature testing to determine what kind of event handler registration is available.

Browser incompatibilities

Older versions (before version 9) of Internet Explorer don't support the standard W3C DOM event model. In particular, they use the attachEvent function rather than addEventListener. There are several ways to address this problem.

The first option is to stick to the legacy event model. One author (who wrote JavaScript: The Definitive Guide) says that the legacy event types are "universally supported". If your web application doesn't require complicated event handling, such as event propagation or multiple event handlers, then this is probably a good choice.

Another option is to use a JavaScript library, like jQuery (see Ch. 10 of Fundamentals of Web Development), which adds a layer of abstraction over event handling so that you don't have to deal with browser incompatibilities. (In general, this is a very good option, but in this class, please don't use jQuery and similar libraries on the assignments. You are welcome to use them on the final project.)

A third option is to target one or the other of the two main event models (DOM Level 3 or IE), but that means you will frustrate users who don't have the targeted browser. Almost all web applications are intended to attract users, not drive them away, so this option might not be a good choice. However, as time goes by there will be fewer and fewer people using older versions of Internet Explorer, and using only the standard DOM Level 3 event model will cause problems for fewer users.