Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Передача параметров в обработчик события (https://javascript.ru/forum/events/41320-peredacha-parametrov-v-obrabotchik-sobytiya.html)

ERB 08.09.2013 17:24

Передача параметров в обработчик события
 
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 08.09.2013 20:56

Цитата:

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

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

ERB 10.09.2013 11:09

То что, в момент когда я кликаю по элементам переменная 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);
}

рони 10.09.2013 11:25

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

BETEPAH 10.09.2013 11:37

Цитата:

Сообщение от ERB
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 10.09.2013 20:09

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

danik.js 10.09.2013 21:05

<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-движках.


Часовой пояс GMT +3, время: 22:16.