This is a function that easily allows you to tie event handler functions to
browser objects and avoid common pitfalls/bugs, using the minimum byte size
for its functionality (far less than just one kilobyte!).
"View source" to see/use it. Features include:
- Automatic detection of DOM2 Event Model and usage of
addEventListener() where this is supported.
- Cross-browser compatible, including all modern browsers
back to IE/Mac, IE4/Win and even NS4, which are supported by few other event
manager scripts.
- Attach multiple event handlers to one event.
- Can remove any events assigned by the script.
- Avoids IE memory leaks to keep your web page or
application snappy.
- Passes correct 'event' object to all called functions,
negating the need to test for window.event in handler functions.
- 'this' keyword correctly implemented as functions are
run as methods of the object to which they are attached.
- Disallows duplicate handlers (like the DOM2 event model),
while allowing identical methods of non-identical objects.
- Manages returned values and automatically executes a
'return false' if any called functions for one event return false.
- Backs up previous events assigned by other event manager
scripts, for excellent "unobtrusive" interoperation.
- Can be backed up itself by other well-written event
manager scripts.
- Cancel event default actions and/or bubbling with an
optional cancellation function.
- TINY code size: 649 bytes for the entire script (when
compacted), plus
some optional extras.
I hope you find it handy!
(Try clicking the document and watching the title).
It's free to use and distribute, as long as you retain the credit notice.
If you like this and/or my other scripts, you're more than welcome to
make a donation, too.
Usage
Copy and paste the code into your own project. You call the two main
functions, addEvent() and removeEvent(), with the
following parameters:
- A reference to an object like
window or
document, to which your event will be attached.
- The event name in quotes without the 'on' prefix
(e.g.
'load', 'click' or
'mouseover').
- A function reference that is called when the event fires.
- OPTIONAL: A boolean value that, if true, disables usage of
addEventListener().
There's a few examples in the source of this page.
The functions you register are automatically passed the correct 'event'
object, alias window.event in MSIE.
If any of the functions called explicitly returns false, the whole event
returns false, for compatibility with older scripts.
However, please use cancelEvent() in your own scripts instead of
relying on this behaviour.
All functions are automatically removed when the page unloads in MSIE; you
do not have to do anything special to work around memory leaks :).
The removeEvent() function has the same parameters as
addEvent(), it just works in reverse.
Good luck - Angus.