Всё объясню:
Как работает код:
Находятся элементы на странице и помещаются в массив x = [0, 1, 2];
Начинается цикл объявлением глобальной переменной i = 0;
Затем идет проверка, и если i < длины массива, то:
1) на div вешается функция слушатель для нажатия с функцией function(){console.log( _x[i] )
2) глобальная переменная i увеличивается на единицу.
Когда i достигает значения больше индексов массива (i = 3, не проходит проверку) цикл прекращается.
Теперь мы наводим курсор на div и кликаем:
Слушатель запускает функцию function(){console.log( _x[i] )
Функция пытается найти i.
Так как внутри функции переменная i не была определена, она обращается к глобальной области видимости.
В глобальной области видимости переменная i == 3, по такому индексу в массиве ничего нет - функция пишет в консоль undefined.
Как исправить:
Создать функцию, которая будет создавать функции с определенным индексом и вызывать её в цикле:
var _a = document.querySelectorAll('.a'),
_b = document.querySelectorAll('.b');
function f_console_log_B_for_index(i) {
return function(){console.log( _b[i] );}
}
function f_console_log_A_for_index(i) {
return function(){console.log( _a[i] );}
}
for(var i = 0; i < _a.length; i++){
_a[i].addEventListener('click', f_console_log_A_for_index(i),false);
_b[i].addEventListener('click', f_console_log_B_for_index(i),false);
}
В такой создаваемой функции значение переменной i будет таким с каким вызвали функцию, создавшую её.
Прочитайте про области видимости и замыкания.
