Передача параметров в обработчик события

[ERB]

element = document.getElementById("some_id");

for (var i = 0; i < 10; i++) {
var childElement = document.createElement("span");
childElement.innerHTML = "элемент: №" + i + "<br>";
childElement.addEventListener(
"click",
function() {
alert("элемент: №" + i); // здесь хочу передать параметр к какому то функцию, например "i"
},
false
);
element.appendChild(childElement);
}

Но, при клике к "span" элементам, появляется сообщение: "элемент: №10". Я ожидал номера будут разные и соответствовать номеру каждого элемента. Можете объяснить, почему так происходит?

[BETEPAH]

Можете объяснить, почему так происходит?

Объяснение: потому что в тот момент, когда Вы кликаете по элементам, i=10.
Вот здесь рассматривается практически Ваш случай - http://javascript.ru/basic/closure

[ERB]

То что, в момент когда я кликаю по элементам переменная i=10 было понятно, но небыло понятно, как получить необходимый результат (т.е. как сделать чтобы alert выдал разные значения). Теперь понятно, спасибо за полезную ссылку.

Решение:

element = document.getElementById("some_id");

for (var i = 0; i < 10; i++) {
var childElement = document.createElement("span");
childElement.innerHTML = "элемент: №" + i + "<br>";
childElement.addEventListener(
"click",
function(i) {
return function() { alert("элемент: №" + i);}
},
false
);
element.appendChild(childElement);
}

[рони]

ERB,
вы уверены что ваш код полностью функциональный?

[BETEPAH]

childElement.addEventListener(
"click",
function(i) {
return function() { alert("элемент: №" + i);}
},
false
);

Забыли вызов функции поставить.

<div id="some_id"></div>
<script>
element = document.getElementById("some_id");
for (var i = 0; i < 10; i++) {
    var childElement = document.createElement("span");
    childElement.innerHTML = "элемент: №" + i + "<br>";
    childElement.onclick = function(i) {
        return function() { alert("элемент: №" + i);}
    }(i);
element.appendChild(childElement);
}
</script>

[ERB]

А да, точно, спасибо большое

[danik.js]

<div id="some_id"></div>
<script>
element = document.getElementById("some_id");
for (var i = 0; i < 10; i++) {
    var childElement = document.createElement("span");
    childElement.innerHTML = "элемент: №" + i + "<br>";
    childElement.onclick = (function(i){ alert("элемент: №" + i);}).bind(null, i)
element.appendChild(childElement);
}
</script>

Есть еще такой вариант. Работает в ES5-совместимых js-движках.