Every aspect of JavaScript programming in the browser is object-oriented. Naturally, any tools and utilities you write should also incorporate object-oriented concepts that organize your code into one or more objects. In the case of events, you'll begin work on an object containing utility methods that work in all modern browsers.

Start by creating an object called eventUtility, shown in the following code:

var eventUtility = {};

This code uses object literal notation to create a singleton object. You do not need to create a new data type for this utility because it does not need any instance data; it's simply a utility in which all the necessary data is passed to its methods. Now add an if statement to branch your code, as shown before. Check if addEventListener is a feature supported by the browser:

var eventUtility = {};

if (typeof addEventListener === "function") {

} else {

}

Now the eventUtility object needs a method to add event handlers to an object. Call this method addEvent, and assign it a function that calls either addEventListener() or attachEvent(), such as the following code in bold:

var eventUtility = {};

if (typeof addEventListener === "function") {
    eventUtility.addEvent = function(obj, evt, fn) {
        obj.addEventListener(evt, fn, false);
    };
} else {
    eventUtility.addEvent = function(obj, evt, fn) {
        obj.attachEvent("on" + evt, fn);
    };
}

This new code creates an addEvent() method as a member of the eventUtility object. Actually, there are two definitions of addEvent(), but only one is actually assigned to eventUtility.addEvent. Notice the three parameters of addEvent() in both declarations; they are the same. This is very important because you want to be able to call addEvent() and have it work correctly regardless of what browser the user is using. The following code will add an event handler to an element to handle the click event, and it'll work in any modern browser (even IE6):

eventUtility.addEvent(el, "click", function() {
    alert("You clicked me!");
});

Let's take a look and see how this is more advantageous to the setEventHandler() function shown at the beginning of this lesson.

Even though the eventUtility object makes working with events a little easier (and faster), the implementation doesn't quite match that of techniques used by modern-day JavaScript experts. So let's look at how this code can be transformed into modern-day JavaScript.

An updated eventUtility object starts as before with an object literal:

var eventUtility = {};

Next, add a method called addEvent() to the object, like this:

var eventUtility = {
    addEvent : function() {

    }
};

Notice that this method does not specify any parameters. That is because this function declaration is actually going to execute and return another function to addEvent. Let's add some of that code now:

var eventUtility = {
    addEvent : function() {

    }()
};

The only thing this code adds is a set of parentheses at the end of the function statement. Remember that in order for a function to execute, the function's identifier must be followed by a set of parentheses, as in this call to alert():

alert("Hello, JavaScript!");

You can apply the same concept to anonymous functions by simply adding a set of parentheses to the end of the function statement, like this:

function() {
    alert("Hello, JavaScript!");
}();

This code doesn't actually work because it has a syntax error, but you can make it work by surrounding the function and parentheses with another set of parentheses, like this:

(function() {
    alert("Hello, JavaScript!");
}());

So when the JavaScript engine loads this code, it executes the anonymous function that, in turn, executes the alert() method inside it. This type of function is sometimes referred to as a self-executing function.

Returning to your event utility object, you have an anonymous function that executes after the browser loads the JavaScript code, but it isn't returning anything worthwhile to addEvent. So let's change that with the following bold code:

var eventUtility = {
    addEvent : (function() {

if (typeof addEventListener === "function") {
            return function(obj, evt, fn) {
                obj.addEventListener(evt, fn, false);
            };
        }
    }())
};

This new code first encapsulates the self-executing function in parentheses. It then adds an if block that looks somewhat similar to code in your original eventUtility code; it returns a function to addEvent as opposed to directly assigning the function to eventUtility.addEvent as in the previous version. Let's finish this new version by adding an else block for browsers that do not support addEventListener. The new code is in bold:

var eventUtility = {
    addEvent : (function() {
        if (typeof addEventListener === "function") {
            return function(obj, evt, fn) {
                obj.addEventListener(evt, fn, false);
            };
        } else {
            return function(obj, evt, fn) {
                obj.attachEvent("on" + evt, fn, false);
            };
        }
    }())
};

Once again, the contents of the else block are somewhat similar to those of the previous version. The main difference is that a function is returned to addEvent instead of being assigned directly; the end result, however, is the same. When the self-executing function does its thing, it returns one of two functions to addEvent; which function depends on what event model the browser supports.

In this lesson, you learn how to write your own event utility to handle cross-browser issues.

Step-by-Step

You will rewrite the calculator application from Lessons 17, 18, and 19 using the event utility object.

1. Open your text editor and type the following JavaScript:

   var eventUtility = {
       addEvent : (function() {
           if (typeof addEventListener === "function") {
               return function(obj, evt, fn) {
                   obj.addEventListener(evt, fn, false);
               };
           } else {
               return function(obj, evt, fn) {
                   obj.attachEvent("on" + evt, fn);
               };
           }
       }()),
       removeEvent : (function() {
           if (typeof removeEventListener === "function") {
               return function(obj, evt, fn) {
                   obj.removeEventListener(evt, fn, false);
               };
           } else {
               return function(obj, evt, fn) {
                   obj.detachEvent("on" + evt, fn);
               };
           }
       }())
   };

   Save it as eventutility.js.

2. Now open another instance of your text editor and type the following HTML:

   <html>
   <head>
       <title>Lesson 20: Example 02</title>
       <style type="text/css">
       td {
           border: 1px solid gray;
           width: 50px;
       }
   
       #results {
           height: 20px;
       }
       </style>
   </head>
   <body>
       <table border="0" cellpadding="2" cellspacing="2">
           <tr>
               <td colspan="4" id="results"></td>
           </tr>
           <tr>
               <td><a href="#">1</a></td>
               <td><a href="#">2</a></td>
               <td><a href="#">3</a></td>
               <td><a href="#">+</a></td>
           </tr>
           <tr>
               <td><a href="#">4</a></td>
               <td><a href="#">5</a></td>
               <td><a href="#">6</a></td>
               <td><a href="#">-</a></td>
           </tr>
           <tr>
               <td><a href="#">7</a></td>
               <td><a href="#">8</a></td>
               <td><a href="#">9</a></td>
               <td><a href="#">*</a></td>
           </tr>
           <tr>
               <td><a href="#">Clear</a></td>
               <td><a href="#">0</a></td>
               <td><a href="#">=</a></td>
               <td><a href="#">/</a></td>
           </tr>
       </table>
       <script type="text/javascript" src="eventutility.js"></script>
       <script type="text/javascript">
       function addDigit(digit) {
           var resultField = document.getElementById("results");
   
           resultField.innerHTML += digit;
   
           return false;

   }
   
       function calculate() {
           var resultField = document.getElementById("results");
   
           resultField.innerHTML = eval(resultField.innerHTML);
   
           return false;
       }
   
       function reset() {
           var resultField = document.getElementById("results");
   
           resultField.innerHTML = "";
   
           return false;
       }
   
       function getHandlerFunction(innerHTML) {
           return function() {
               addDigit(innerHTML);
   
               return false;
           };
       }
   
       onload = function() {
           var links = document.getElementsByTagName("a"),
               length = links.length;
   
           for (var i = 0; i < length; i++) {
               var link = links[i],
                   innerHTML = link.innerHTML,
                   func = null;
   
               switch (innerHTML) {
                   case "Clear":
                       func = reset;
                       break;
   
                   case "=":
                       func = calculate;
                       break;
   
                   default:
                       func = getHandlerFunction(innerHTML);
               }
   
               eventUtility.addEvent(link, "click", func);
           }
       };
       </script>
   </body>
   </html>

   Save it as lesson20_example01.htm. Not much changed in this version. The eventUtility object contained within the external JavaScript file is referenced, and the utility is used to assign the click event handlers to the <a/> element objects. Open this file in multiple browsers and you'll find that it works in them all.

To get the sample code files, you can download Lesson 20 from the book's website at www.wrox.com.

Note

Please select Lesson 20 on the DVD to view the video that accompanies this lesson.