DOM loading and addEvents scripts

An overview of what event handling is, what its problems are and how to write proper cross-browser scripts. Also: Quirksmode.org - addEvent(): Winner of Quirksmode contest for new version of addEvent() and removeEvent(). Plus: Quirksmode.org - Early events: To make javaScript work 'on click' requires adding an event. This explains the old method - the inline event registration model - where event handlers are added as attributes to the HTML elements they were working on, and the better W3C event registration model.

Closures and executing JavaScript on page load. Simon Willison expands on the JavaScript closure event.

Event Cache is a small script which can store the events you have set on a page and remove them on unload. This way it can prevent memory leakage.

Executing JavaScript on page load. A common JavaScript action is "registering" a script to be executed once the page has finished loading - this enables multiple registers and behaves nicely in the presence of other scripts. This tutorial goes further into its use of a JavaScript language feature known as a closure: Closures & executing JavaScript

Event attachment: the ability create and append elements, and the ability to remove them. Wrap these Dom objects and Event objects up in a easy to use interface. The implementation code lives in a closure wrapper when we add this behavior to the window's 'load' event.

Multiple event handler functions for javascript events. Specify multiple event handler functions for any javascript event using the object.event (traditional) event registration method.

Enhance your page performance. Includes information on avoiding the on-load problem with on-demand pulling of content.

Inspired by Simon Willison's addLoadEvent function, a standalone generic solution that anyone could use without needing a specific framework.

domFunction is an easy-to-use helper script, that allows other DOM scripting to run before window.onload; the practical benefit is that javascript doesn't have to wait for images or other dependencies to finish loading anymore - it can begin as soon as the DOM is ready.

All sorts of document.addEventListener, document.readyState, script.onreadystatechange stuff as another solution to DOM load.

Uses setTimeout. The page must be slower than 10ms in order for the speed to improve. It especially helps for elements closer to the top of the page.

The window.onload event will fire after the page has finished loading and call whatever function you've assigned to it. But other scripts or libraries will want to attach an onload event of their own. A document has two ready states. window.onready is fired after the page, css, scripts, images and all other objects have been loaded. (everything necessary to display the page.) The second 'DOM-ready state' is when the browser has actually constructed the page but still may need to grab a few images or flash files. This is when registered functions are 'fired' because all of the getElementsByIDs and getElementsByName etc will work. This script creates a registration function that allows you to register events. For Mozilla it sets up an event listener which will fire when the DOM is ready. For IE it exploits the behavior of IE's implementation of the standards defined 'defer' attribute. Defer basically defers the execution of a script until the DOM has been loaded (but before images).

ELO - Encapsulated Load Object - Handle window load events. The window.onload event doesn't happen until all HTML code and dependencies have loaded. In most cases, we want to have our scripts as soon as the DOM has finished loading and not wait for images and their likes. ELO is a more flexible for any number of load events.

Delaying the loading of specific images to cut down on HTTP requests. The image src addresses a default.gif placeholder followed by a hash and the real URI for the image. The script goes through all the images, check which one has a hash in its src attribute and remove everything up to the hash.

Body on-load, content call and scheduler tests for differrent sized divs and images, illustrated nicely, within an right column (CSS) layout.