Events and Event Handling Notes

events.pptx

These slides explain the four basic kinds of event handling.

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: https://javascript.info/tutorial/bubbling-and-capturing

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:
http://www.javascript-coder.com/html-form/html-form-tutorial-p2.phtml
http://www.javascript-coder.com/html-form/html-form-tutorial-p3.phtml

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;
   alert(text);
}

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()">
The author of Modern JavaScript says that this way of assigning event handlers should be avoided.

Traditional Event Handling

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

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, a good approach is to use a function like the addEvent function the author describes in Chapter 8 of Modern JavaScript. It 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. The author of 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. 13 of Modern JavaScript), 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.