X-Browser Event Handling

One of the most powerful features in almost every Framework is cross-browser Event management. This is important because standards dictate that you should always separate implementation from design by leveraging the JavaScript DOM event management, instead of writing events inline. Unfortunately, there are two different standards, arising from the browser wars, when Microsoft developed a non-standard event model, making cross-browser event management painful. Each Framework has their own implementation that wraps the two event systems, sometimes including additional bells and whistles, such as: scope adjustment, deferred loading, caching, cleanup, custom events, and more. However, the event management system of most Frameworks is so complex you have to wonder is all this necessary or how were events handled before Frameworks.

The reality is that most people do not need the extras, just a couple simple event handler functions that wrap the cross-browser methods. Unfortunately, many programmers do not yet understand the power of the JavaScript event handlers. The first advice I usually give to new web developers is the proper way to listen for events, so I wanted to write it down.

Just to reiterate what I said at the beginning of this article, You should always use JavaScript event handlers, instead of writing events inline. Managing events is not complicated, it just requires a different coding paradigm. This article will introduce the simplest (yet powerful) event wrappers that you can use for cross-browser support.

How do it…

Here is the code for cross-browser event functions addListener and removeListener:

(function(w) {
    //	Create the Event Function wrappers
    if (w.addEventListener) {
        // standards compliant method
        w.addListener = function(el, eType, fn, capture) {
            el.addEventListener(eType, fn, capture);
        w.removeListener = function (el, eType, fn, capture) {
            el.removeEventListener(eType, fn, capture);
    else if (w.attachEvent) {
        // microsoft compliant method
        w.addListener = function(el, eType, fn, capture) {
            el.attachEvent("on" + eType, fn, capture);
        w.removeListener = function (el, eType, fn, capture) {
            el.detachEvent("on" + eType, fn, capture);
    else {
        // really old browses, circa 1990's
        throw('Event handlers are unsupported in this browser.');

If I had the anchor element:

<a href="#" id="myAnchor" onclick="someFunction();">clickMe</a>

Here is how you would use the functions to attach and remove events:

function linkCallbackFunction(e) {
    // do something
var link = document.getElementById("myAnchor");
addListener(link, 'click', linkCallbackFunction);
removeListener(link, 'click', linkCallbackFunction);

How it works…

The first block of code will create the addListener and removeListener event handling functions in the global namespace, or raise an exception on super old browsers that you do not need to support. These functions wrap the native event handling functions provided by the browser, but otherwise do not do any magic.

The second and third blocks of code shows how to use the addListener function to attach a callback function to the click event of an anchor element with the id myAnchor. It is as simple as passing an element, the event name, and a callback function. To remove an event pass the same arguments to the removeListener function.

You can safely ignore the capture option, unless you know what the CustomEvent Bubbling and Capture Phase is.

The code is available for download on GitHub.

There’s more…

For some more information on cross-browser event support, check out Peter Paul Koch’s article: Advanced Event Registration.