Почему функция возвращает данные последней итерации?

Question

[dicem]

Вобщем, создаю новый DOM элемент
var div = d.createElement('div');
Пробовал добавлять функцию перед вставкой в document посредством:

div.onclick = function(){ 
			for (var j = 0; j < arr.length; j++) { 
				if (arr[j].id == i) { 
					var name = arr[j].name;
				}
			}
			alert('Div number is ' + i + '. Name is: ' + arr[j].name);
		}

Однако создавая циклично таким макаром объект и события для них, отрабатывает события с данными последней итерации.
Полный код:

(function(w, d, u) { 
	"use strict"; 

	var arr = [
		{
			id: 1,
			name: 'John'
		},
		{
			id: 2,
			name: 'Peter'
		},
		{
			id: 3,
			name: 'Kate'
		}
	]; 

	for (var i = 0; i < arr.length; i++) { 
		var div = d.createElement('div');
		div.onclick = function(){ 
			for (var j = 0; j < arr.length; j++) { 
				if (arr[j].id == i) { 
					var name = arr[j].name;
				}
			}
			alert('Div number is ' + i + '. Name is: ' + arr[j].name);
		} 
		div.style.cssText = 'width:30px;height:30px;border:1px solid red';
		d.body.appendChild(div); 
	} 
})(window, document, undefined)

Что я делаю не так и правильно ли я понимаю, что данным методом функцию не прикрепить?

UPD: Понял, что функции к конекчу верно, поэтому меняется суть вопроса.

Answer 1

[Stalker_RED]

Вместо var i нужно let i
И читать "область видимости переменных"

Answer 2

[Иван Корюков]

Вы создаёте замыкание, которое ссылается на переменную i. Ключевое слово "ссылается", т.е. функция обработчик не запоминает значение i на момент своего создания, а просто "знает", что где-то есть i. В момент выполнения любого обработчика i равно последнему индексу.

Answer 3

[jasonOk]

Вместо div.onclick

div.addEventListener('click', function () {
...