window.onload = function() {
  var x = document.getElementsByTagName('H3');
  for (var i = 0; i < x.length; i++) {
    x[i].onclick = openClose;
    x[i].relatedElement = x[i].nextSibling; // simplified situation 
    x[i].relatedElement.relatedElement = x[i];
  }
}

function addEvent(obj, type, fn) {
  if (obj.attachEvent) {
    obj['e' + type + fn] = fn;
    obj[type + fn] = function() {
      obj['e' + type + fn](window.event);
    }
    obj.attachEvent('on' + type, obj[type + fn]);
  } else obj.addEventListener(type, fn, false);
}
function removeEvent(obj, type, fn) {
  if (obj.detachEvent) {
    obj.detachEvent('on' + type, obj[type + fn]);
    obj[type + fn] = null;
  } else obj.removeEventListener(type, fn, false);
}

/* 
Original idea by John Resig 
Tweaked by Scott Andrew LePera, Dean Edwards and Peter-Paul Koch 
Fixed for IE by Tino Zijdel (crisp) 
Note that in IE this will cause memory leaks and still doesn't quite function the same as in browsers that do support the W3C event model: 
- event execution order is not the same (LIFO in IE against FIFO) 
- functions attached to the same event on the same element multiple times will also get executed multiple times in IE 
*/
function addEvent(obj, type, fn) {
  if (obj.addEventListener) obj.addEventListener(type, fn, false);
  else if (obj.attachEvent) {
    obj["e" + type + fn] = fn;
    obj.attachEvent("on" + type,
    function() {
      obj["e" + type + fn]();
    });
  }
}
function removeEvent(obj, type, fn) {
  if (obj.removeEventListener) obj.removeEventListener(type, fn, false);
  else if (obj.detachEvent) {
    obj.detachEvent("on" + type, obj["e" + type + fn]);
    obj["e" + type + fn] = null;
  }
}

// written by Dean Edwards, 2005 
// http://dean.edwards.name/function ;addEvent(element, type, handler) { 
// assign each event handler a unique ID 
// 為事件處理函數(shù)設(shè)定一個唯一值 
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
// create a hash table of event types for the element 
if (!element.events) element.events = {};
// create a hash table of event handlers for each element/event pair 
var handlers = element.events[type];
if (!handlers) {
  handlers = element.events[type] = {};
  // store the existing event handler (if there is one) 
  // 如果對象已經(jīng)注冊有事件處理，那么要保留下來,并保存為第一個 
  if (element["on" + type]) {
    handlers[0] = element["on" + type];
  }
}
// store the event handler in the hash table 
handlers[handler.$$guid] = handler;
// assign a global event handler to do all the work 
// 指派一個全局函數(shù)做統(tǒng)一的事件處理，同時避免了反復(fù)注冊 
element["on" + type] = handleEvent;
};
// a counter used to create unique IDs 
addEvent.guid = 1;
function removeEvent(element, type, handler) {
  // delete the event handler from the hash table 
  if (element.events && element.events[type]) {
    delete element.events[type][handler.$$guid];
  }
};
function handleEvent(event) {
  // grab the event object (IE uses a global event object) 
  event = event || window.event;
  // get a reference to the hash table of event handlers 
  // 這里的 this 隨 handlerEvent function 被觸發(fā)的source element 變化而變化 
  var handlers = this.events[event.type];
  // execute each event handler 
  for (var i in handlers) {
    //這樣寫才能保證注冊的事件處理函數(shù)中的 this 得到正確的引用，直接handlers[i]()是不行的 
    this.$$handleEvent = handlers[i];
    this.$$handleEvent(event);
  }
};