Как правильно навешивать события

Колос · March 26, 2010

Пытаюсь динамически навешивать события на элементы. Делаю это так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Счётчик</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<script type="text/javascript">
function napolnenie()
{
  for ( var i = 0; i < 2; i++)
  { 
	var spisok = document.getElementById('spisok');
	var novspan = document.createElement('span');
	novspan.innerHTML = 'Кнопка' + i;  
	novspan.onclick = 
	  function() 
	 {
	   alert(i);
	 }

	spisok.appendChild(novspan);
  }
}
</script>
</head>
<body onLoad="napolnenie();">
  <div id="spisok">
  </div>
</body>
</html>

Желаемое поведение: при щелчке на "Кнопка0" вижу "0", при щелчке на "Кнопка1" вижу "1".

Имеющееся поведение: при нажатии на любой спан высвечивается "2".

Объясните пожалуйста, почему так происходит? Если бы всегда высвечивалось "1" я бы ещё понял, но почему "2"?

Второй вопрос, что делать?

Searcher · March 26, 2010

Что-то у вас с логикой... вы повесили событие, которое выводит переменную i по клику. А когда событие наступает???!!!

Событие наступает когда человек кликает по спану, а в каком состоянии в этот момент переменная i ???

Колос · March 26, 2010

Что-то у вас с логикой... вы повесили событие, которое выводит переменную i по клику. А когда событие наступает???!!!
Событие наступает когда человек кликает по спану, а в каком состоянии в этот момент переменная i ???

А как правильно написать, чтобы при навешивании события i понималась не как переменная, а как её значение?

Great Rash · March 26, 2010

Сдается мне что тут проблема в замыканиях. Прочитайте про реализацию замыканий в яваскрипте.

Во че на хабре нашел:

for (var i = 0; i < links.length; i++) {
   (function(i) {
	  links[i].onclick = function() {
		 alert(i);
	  }
   })(i);
}

Колос · March 26, 2010

Хитро.... Но работает. Спасибо.

Sign In

Как правильно навешивать события

Question

Колос

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Searcher

Link to comment

Share on other sites

Колос

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Колос

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information