< Continued from page 1

With your JavaScript completely separated out from the HTML and wrapped inside an anonymous function the only part of your script that is still able to interfere with or be interfered with by any other scripts on the same page are event handlers. The big problem with event handlers is that for each event on a particular element there can be only one event handler. If two scripts on the page both try to assign an event handler for the same event to the same element then one handler script will overwrite the other.

The solution to this is to not use event handlers and instead use event listeners. Now event listeners have their own problems including that not all browsers support them and that Internet Explorer has its own version that works completely differently and which applies "this" references to the element the listener is attached to rather than the object it belongs to.

My Cross Browser Add and Remove Event Listeners script resolves those issues by providing addEvent() and removeEvent() function calls that hide the differences in the way Internet Explorer works. As long as the browser being used supports either the standard or IE version of event listeners (and all modern browsers and browsers in common use do) then adding these functions to your script will make converting from using event handlers to event listeners a trivial exercise. Let's take a simple event handler and look at what we need to change it to in order to use these functions instead.

var lnk = document.getElementById('ex');
lnk.onclick = function() {...};

Now the ... represents whatever code the event handler is to run. To convert that to use our event listener code instead we simply replace the second line so it looks like this instead:

var lnk = document.getElementById('ex');
addEvent(lnk, 'click', function(event) {...});

Note how everything in the event handler version transfers into the event listener call. The element we are attaching to becomes the first parameter, the event we are detecting (without the "on" at the front) becomes the second parameter, and the function code very slightly modified is the third parameter.

If you simply go through all of the event handler calls in your code and change them to call the addEvent function instead then your code will become independent of any code elsewhere that wants to add the same event handler.

Oh, and before we forget, there is a second variant of the event handler call you may need to convert:

var bbb = document.getElementById('aa');
bbb.onclick = abc;

That variant becomes:

var bbb = document.getElementById('aa');
addEvent(bbb, 'click',abc(event));

One final thing in making sure that your code is totally unobtrusive in so far as other JavaScripts on the page are concerned. When you wrap all of your code into an anonymous function (as described on page one of thios article) that wrapper goes around the addEvent() and removeEvent() functions as well as the rest of the code. It then doesn't matter then if you end up with multiple copies of that code in your page or if some scripts you add use their own variants of that code because the scope of those functions is limited to within your anonymous function. That of course means that you can't use a removeEvent call from inside of your code to remove an event listener added from outside your code but then you shouldn't be trying to do that anyway since all the listeners your script adds should be added from inside that function and you should therefore neither know nor care what listeners exist outside of your function and therefore have no reason for wanting to remove them.