How do you write your JavaScript?

[mPeror]

Since the day i've learned about Javascript/DOM and events, i've been coding the main script for my document this way:

window.onload = init;

function init()
{
   /*

    get the needed elements' references and assign events to them

   */
}

As you see, it's a pretty linear approach, and creates lots of clutter, especially if you had so many elements in your document that you need to assign events to.

So is there a better approach to keep things more organized?

[mathopenref]

Put all the functions in an external js file. This will:
a) tidy up your primary file
b) cause the browser to cache the js file and not fetch all that js on every page load
c) make it a bit harder for others to snoop into your code

[MikeFoster]

I've seen basically 2 different techniques.

Technique 1: Let window.onload initialize everything.

Pro:
- All initialization functions are called from one place.
- Downgrade detection is done once and before any initializations take place.

Con:
- There is the possibility of an onload conflict.

var widgets = [];

window.onload = function()
{
  // Does the browser provide the objects/methods this application requires?
  if (document.getElementById && document.getElementsByTagName && document.createElement) {
    // If yes then initialize everything
    widgets[0] = new widget1();
    widgets[1] = new widget2();
    for (var i = 0; i < widgets.length; ++i) {
      widgets[i].onload();
    }
    initSomeBehavior();
    initSomeOtherBehavior();
  }
};

window.onunload = function()
{
  for (var i = 0; i < widgets.length; ++i) {
    widgets[i].onunload();
  }
};

Technique 2: Let each object initialize itself by registering its own listeners.

Pro:
- There is no possibility of an onload conflict.
- Scripts become self-initializing

Con:
- Initialization code is scattered throughout the project files.
- Downgrade detection becomes more complicated.
- Using this technique may depend on what browsers the application is required to support.

// main.js //

xAddEventListener(window, 'load', mainOnLoad, false);
xAddEventListener(window, 'unload', mainOnUnload, false);

function mainOnLoad()
{
  // initialization for main.js
}

function mainOnUnload()
{
  // clean-up for main.js
}

function xAddEventListener(e,eT,eL,cap) // Source
{
  if(!(e=xGetElementById(e))) return;
  eT=eT.toLowerCase();
  if(e.addEventListener) e.addEventListener(eT,eL,cap);
  else if(e.attachEvent) e.attachEvent('on'+eT,eL);
  else e['on'+eT]=eL;
  return h;
}

// end main.js //

// widget.js //

xAddEventListener(window, 'load', widgetOnLoad, false);
xAddEventListener(window, 'unload', widgetOnUnload, false);

function widgetOnLoad()
{
  // initialization for widget.js
}

function widgetOnUnload()
{
  // clean-up for widget.js
}

// end widget.js //

What other pros and cons could be listed?

[mPeror]

ًThanks MikeFoster, just the kind of answer i was looking for.

Well i don't actually use the "onload" property, i use a function like the xAddEventListener you've used.

My question was rather about the logic, how do you attach events to elements. Do you put them all in one function that's called once the document it loaded (first technique)? or do you attach a "load" event for all the elements you need events for (second technique)? or is there a better one?

[Kravvitz]

I prefer what Mike calls "technique 2".

Have either of you seen this?