When playing around with JavaScript that modifies the DOM inside the browser, you want to start with these modifications as fast as possible so the visitor ideally does not recognize the changes. This applies to RUZEE.Borders as well as to animations on your page or interactive applications.

Usually the window.onload event is used to start these animations, to start modifying the DOM, etc.. This event however is trigger after the page has been loaded completely including all images, etc.. A domload event, that the browser triggers after the HTML has been loaded completely but before all images were loaded is only supported by Firefox via the DOMContentLoad event type (and IE via the defer atribute of a tag, check out Dean Edwards’ blog posting on that issue).

James Edwards (no idea if he’s in any way related to Dean) had the idea to poll the DOM until it is ready. He wrote a nice library, called the domFunction that does that.

James lib has one major shortfall: It’s API is simply nothing you are used to and it doesn’t use real events when available. So Tanny O’Haley had the idea to simulate the Firefox DOMContentLoaded event functionality via James’ domFunction. Unfortunatly his solution crashes Safari and IE, at least with RuzeeBorders, because it only waits, till the body elements is available which happens pretty soon on these browsers… And before the DOM has been loaded completely.

So I put my hands on it, figured out some tweaks and found a clean, tiny, and simple solution that works cross-browser: RUZEE.Events.

With version 0.2, the domload event is done via the Internet Explorer “defer” hack by Matthias Miller. On Firefox, the default way via the DOMContentLoaded event is used. For Safari and Konqueror, a modified version of John Resig’s (the guy behind jQuery) solution is used – check out Dean Edwards’ again 😉 on that issue.

Features

These are the features of RUZEE.Events:

  • Add events to any DOM element on your page – just like any other JavaScript cross-browser event managment lib does.
  • Additionally a “domload” event, that gets triggered via DOMContentLoaded when available or simulated if not…
  • A cross-browser method to get the source element of an event.

Supported Browsers

These are the browser I’m testing my releases with (and others may work as well):

  • Internet Explorer 5.5, 6.0
  • Firefox 1.5
  • Safari 2
  • Opera 8.5 (via domloadeof DIV)
  • KDE Konqueror 3.5

Usage

RUZEE.Events require some things in order to work properly with your page. First of all it needs to be included inside your HTML head section:

<head>
  ...
  <script type="text/javascript" src="events.js"></script>
    ...
</head>

You may now use the library inside a script section. Here’s an example:

<script type="text/javascript" type="text/javascript"><!--

RUZEE.Events.add(window,'domload',function(){
  // modify your DOM here, e.g. draw some RUZEE.Borders...
});
//-->
</script>

Of course it is also possible to add events to any HTML element in your page. Let’s add some functionality to the element with the ID ‘clickme’ when it get’s clicked:

<script type="text/javascript" type="text/javascript"><!--

RUZEE.Events.add(window,'domload',function(){
  RUZEE.Events.add(document.getElementById('clickme'),'click',function(ev){
    alert('You clicked on the element with ID '+
      RUZEE.Events.getSrc(ev).id);
  });
});
//-->
</script>

In this example we’ve used the RUZEE.Events.getSrc() method that, given a JavaScript Event object, finds out which DOM element triggered that event – and it does that on any supported browser.

If you want to support Opera 8.x or other browsers where the other used methods won’t work, the last element of the body needs to be the following DIV:

  ... your page ...
  <div id="domloadeof" style="display:none"></div>
</body>

It will not be visible, hence will not kill your layout ;-), but it is that element that RUZEE.Events use to determine, when the DOM has been loaded completely if it needs to simulate the event.

Download

Please download RUZEE.Events v0.2, try it, and post your feedback at the end of this page. The license is included in the release – it’s MIT-style.

Version History

  • v0.2 (2006-06-16):
    • The externel defer script for IE is no longer needed.
    • The domloadeof DIV is only required, if you want to support Opera 8.x.
    • RUZEE.Events.add now works, even if the browser does not support attachEvent or addEvent.
  • v0.1 (2006-05-16):
    • Initial release.

Known Bugs and Limitations

None right now…