[Faab]

В разделе ЧаВО нашёл статью про замыкающие функции closure. Прочитав её, я понял почему срабатывал только последний объект.

И теперь форма function(i){...}(i); выглядет не так уж загадочно. Но вопросы остались.

for(i=0; i<eDivTootgle.length; i++){
	eSubButton = createButton();
	eSubButton.onclick = function(i){
		return function() {
			alert(eDivTootgle[i].id);// показать id родителя
		}
	}(i);
	eDivTootgle[i].appendChild(eSubButton);
};

С примером Ветерана вроде всё понятно. Но вот следущее:

eSubButton.onclick = (function (a)
{
  var div = eDivTootgle[i], n = 0;
    return function(){
    n ^= 1
    div.style.backgroundColor  = n ? '#FF0000' : ''
  }

})()

С рони я уже немного потерялся. Откуда аргумент a?

Что за форма:

eSubButton.onclick = (function (a){...})()

Я уже наверное должен знать такое, но не знаю: что значит

n ^= 1

container.onclick = function (event) {
    event = event || window.event;
    var e = event.target || event.srcElement;
    while (e != this) {
      if (e.tagName == 'INPUT') {
        color = e.parentNode.style.background;
        e.parentNode.style.background = color ? '' : 'red';
        break;
      }
      e = e.parentNode;
    }
  };
  for (; i < elLength; i++) {
    eDivTootgle[i].insertAdjacentHTML('afterbegin', '<input type="button" value="Behind"/>');
  };

Ваш пример оставил пока на десерт.