You have been referred to this item:

Cross-Browser Event Handling

Basic: Single Handler

For very basic single-handler event handling, just use direct assignment of a function reference to the handler, for example:

el.onclick = function() { ... }; or el.onclick = myHandler;

Warning: undesired side effects may come about if you don't understand how variables in these functions behave. See: Closures and getRef().

To ensure cross-browser compatibility, your handler should take a single argument which is expected to be the event, but if it's null, set it to window.event (for IE) like so:

function myHandler(evt) { evt = evt || window.event; ... }

Note that this can be avoided if you use attachEvent() as described in the next section, as any handler attached with that method will get the event object passed in as the first parameter (like the standard DOM behavior).

Now to obtain the target element (that which fired the event), you need to check for IE's proprietary srcElement property:

var elTarget = evt.srcElement || evt.target;

Complex: Multiple Handlers

For multiple handlers and/or more complex event handling, you'll want to use the DOM standard addEventListener() and/or IE's proprietary attachEvent. You can use a wrapper function like Gavin Kistner's AttachEvent(), but you should be aware of the differences between addEventListener() and attachEvent() (as described by PPK, although "harmful" is a bit silly).

A much more comprehensive and heavy duty solution can be found with Brad Fults's Events framework.