Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Holiday Gift Guide
Holiday Gift Guide

A Cross-Browser Solution for Handling JavaScript Events

It all starts with attaching event listeners to elements. Say you have a button that increments a counter each time you click it. You can add an inline onclick attribute and that will work across all browsers but will be violating the separation of concerns and the progressive enhancement. So you should strive for attaching the listener in JavaScript, outside of any markup.

Say you have the following markup:

<button id="clickme">Click me: 0</button>

You can assign a function to the onclick property of the node, but you can do this only once:

var b = document.getElementById('clickme'), count = 0;
b.onclick = function()
{
   count += 1;
   b.innerHTML = "Click me: " + count;
};

If you want to have several functions executed on click, you cannot do it with this pattern while maintaining loose coupling. Technically you can check if onclick already contains a function and if so, add the existing one to your own function and replace the onclick value with your new function. But a much cleaner solution is to use the addEventListener() method. This method doesn't exist in IE up to and including version 8, so you need attachEvent() for those browsers.

When we looked at the init-time branching pattern (Chapter 4) you saw an example of implementing a good solution for defining a cross-browser event listener utility. Without going into all the details right now, let's just attach a listener to our button:

var b = document.getElementById('clickme');
if(document.addEventListener)
{
   b.addEventListener('click', myHandler, false);
}
else if(document.attachEvent)
{
   b.attachEvent('onclick', myHandler);
}
else
{
   b.onclick = myHandler;
}

Now when this button is clicked, the function myHandler() will be executed. Let's have the function increment the number in the "Click me: 0" button label. To make it a little more interesting, let's assume we have several buttons and a single myHandler() for all of them. Keeping a reference to each button node and a counter for the number will be inefficient, given that we can get that information from the event object that is created on every click.

Let's see the solution first and comment on it after:

function myHandler(e)
{
   var src, parts;

   e = e || window.event;
   src = e.target || e.srcElement;

   parts = src.innerHTML.split(": ");
   parts[1] = parseInt(parts[1], 10) + 1;
   src.innerHTML = parts[0] + ": " + parts[1];

   if(typeof e.stopPropagation === "function")
   {
      e.stopPropagation();
   }
   if(typeof e.cancelBubble !== "undefined")
   {
      e.cancelBubble =  true;
   }

   if(typeof e.preventDefault === "function")
   {
      e.preventDefault();
   }
   if(typeof e.returnValue !== "undefined")
   {
      e.returnValue = false;
   }
}

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268