Добавляйте события в новые узлы

Ответ Фила предлагает хорошее решение для опубликованного вами конкретного кода (+1), но не не объясняйте, в чем проблема с вашим исходным кодом.

Проблема в том, что замыкания обработчика событий получают постоянную ссылку на переменную index, а не ее копию на момент их создания. Таким образом, все они видят окончательное значение, которое имеет index (divs.length). Например, этот код

for (index = 0; index < 4; ++index) {
    setTimeout(function() {
        console.log(index);
    }, 100);
}

... будет регистрировать «4» четыре раза, когда происходит тайм-аут, а не «0», «1», «2» и «3».

Чтобы исправить это в общем случае, когда вы хотите убедиться, что ваш обработчик закрывается по определенному значению, используйте фабричную функцию, которая генерирует для вас функцию обработчика событий, где обработчик событий закрывается по аргументу, который вы передаете фабричной функции вместо аргумента. переменная цикла:

for(index=0; index<divs.length; index++) {
    divs[index].addEventListener("click", createHandler(divs[index], true); //capture click event
}

function createHandler(div) {
    return function(){
        console.log(div.getAttribute("id"));
    };
}

Там обработчик событий закрывается через div, что не меняется.

Замыкания — одна из самых мощных функций JavaScript. Как только вы поймете, как они работают (а на самом деле они намного проще, чем думают люди), вы сможете использовать их с действительно хорошим эффектом. Подробнее: Замыкания не сложны< /а>

Это связано с тем, что вы используете divs[index] в обработчике событий, который после завершения цикла устанавливается на последний элемент.

Вместо этого используйте this. Кроме того, вы можете использовать один обработчик событий вместо создания множества одинаковых замыканий, например

function logId(e) {
    console.log(this.getAttribute("id"));
}

... и в вашем цикле ...

divs[index].addEventListener("click", logId, false);

См. https://developer.mozilla.org/en/DOM/element.addEventListener#Memory_issues

Вы можете использовать ключевое слово this, как указал @phil.

Но, чтобы объяснить, в чем заключалась ваша проблема, рассмотрим это закрытие:

for(index=0; index<divs.length; index++) {
  (function(index){
      divs[index].addEventListener("click", function(){
          console.log(divs[index].getAttribute("id"));
      }, true);
  })(index);
}

Теперь каждая функция получает собственную копию переменной index. В вашем коде все они используют одну и ту же переменную; поэтому, в конце концов, index будет равно divs.length -1 независимо от того, какой div на самом деле нажимается.