Показать сообщение отдельно
  #3 (permalink)  
Старый 24.03.2014, 22:33
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

приведу свой пример:

замыкания, это очень просто. сраду приведу рабочий пример. например есть несколько div'ов и им надо повесить обработчики событий, причем у каждого из них должно быть какое то константное значение, смотрим первый пример:

<html>
	<head>
	<title>example</title>
	</head>
	<body>
		<div color="red">1234567</div>
		<div color="blue">1234567</div>
		<div color="yellow">1234567</div>

		<script>
//функция, которая будет вызываться при клике
var click = function ()
	{
	//функция берет из свойства color его значение. и изменяет цвет текста...
	var color = this.getAttribute('color');
	this.style.color = color;
	}
	
//Находим все div'ы и гоним цикл по этим элементам..
Array.prototype.forEach.call(document.querySelectorAll('div'), function (el)
	{
	//el - элемент массива
	//console.log(a); - можно посмотреть, что здесь находится...
	
	//присваиваем функцию событию..
	el.onclick = click;
	});
		</script>
	</body>
</html>


а теперь тоже самый пример, только с замыканием и без свойств color:

<html>
	<head>
	<title>example</title>
	</head>
	<body>
		<div>1234567</div>
		<div>1234567</div>
		<div>1234567</div>

		<script>
//функция, которая будет вызываться при клике
var click = function (color)
	{
	return function ()
		{
		//функция берет переменную color и изменяет ее цвет
		this.style.color = color; //переменная color запомнилась
		}
	}
	
//Находим все div'ы
var divs = document.querySelectorAll('div');
//когда мы вызываем функцию click то возвращается функция
console.log(click("red"));
//при этом переменная color сохраняется, когда ее использует другая функция.
divs[0].onclick = click("red");
divs[1].onclick = click("blue");
divs[2].onclick = click("yellow");
		</script>
	</body>
</html>
Ответить с цитированием