Cross-Browser.com

This code illustrates many different things, some of which are...

• Closures.
• Private properties.
• Object methods as event listeners.
• Scope of 'this' and other variables.
• Using a destructor to prevent circular references in IE.
• Static properties (where all instances share the same property).
• And more...

var grp = new Array(); // Global

window.onload = function()
{
  grp[0] = new Group('div1', '*');
  grp[1] = new Group('div2', '*');
}

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

// Group Object Prototype

function Group(sDivId, sTag)
{
  //// Private Properties
  
  var me = this;
  var ele = document.getElementById(sDivId);
  var eleList = ele.getElementsByTagName(sTag);
  
  //// Public Property
  
  this.instIndex = Group.instances.length;

  //// Constructor Code

  // Add this object to the instances array
  Group.instances[this.instIndex] = this;

  // Assign event listeners
  // to all sTag children of sDivId.
  for (var i = 0; i < eleList.length; ++i)
  {
    eleList[i].onclick = onClick;
    eleList[i].onmouseover = ClickGroup_onMouseover;
  }

  //// Event Listener (private)

  function onClick(evt)
  {
    // Within this event listener...
    // 'this' points to the Element object.
    // 'me' points to the Group instance object.
    // Group's private instance variables and
    // prototype parameters are in scope by closure.
    cMsg(this.nodeName + '.onclick, me.instIndex: ' + me.instIndex);
  }

  //// Public Methods

  this.foo = function()
  {
    // Within this method...
    // 'this' points to the Group instance object.
    // Group's private instance variables and
    // prototype parameters are in scope by closure.
  }

  this.onunload = function() // Destructor
  {
    // Remove circular references for IE
    for (var i = 0; eleList && i < eleList.length; ++i)
    {
      eleList[i].onmouseover = null;
    }  
    ele = null;
    eleList = null;
  }
} // end Group Object Prototype

//// Group Static Property

Group.instances = new Array();

//// Event Listener (global)

function ClickGroup_onMouseover(evt)
{
  // Within this event listener...
  // 'this' points to the Element object.
  // Group's members are not in scope.

  mMsg(this.nodeName + '.onmouseover');
}

//// Debug Messages
var cCnt = 0;
function cMsg(msg){document.getElementById('cTA').value += ++cCnt + ': ' + msg + '\n';}
var mCnt = 0;
function mMsg(msg){document.getElementById('mTA').value += ++mCnt + ': ' + msg + '\n';}

DIV 1

DIV 2

-Tr**r