Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Добавление события в цикле (https://javascript.ru/forum/misc/17064-dobavlenie-sobytiya-v-cikle.html)

Armen 04.05.2011 18:32

Добавление события в цикле
 
Здравсвуйте.
Подскажите пожалуйста, почему не работает код.
Если добавляю событие для одного элемента по getElementById то все ок, а когда добавляю в цикле для елементов getElementByTagName то не работает :(
<script type="text/javascript">

window.onload = function()
{
	var aTag = document.getElementsByTagName("A");

	for( var i = 0; i <= aTag.length; i ++ )
	{
		var links = aTag[i];
		addEvent( links, 'click', handler );			
	}
	
	var handler = function() { alert("Hello") }
}

function addEvent(elem, evType, fn) {
	if (elem.addEventListener) {
		elem.addEventListener(evType, fn, false);
	}
	else if (elem.attachEvent) {
		elem.attachEvent('on' + evType, fn);
	}
	else {
		elem['on' + evType] = fn;
	}
}
</script>

<body>

<a href="#">Click</a>
<a href="#">Click</a>
<a href="#">Click</a>
<a href="#">Click</a>
<a href="#">Click</a>
<a href="#">Click</a>
<a href="#">Click</a>
<a href="#">Click</a>
<a href="#">Click</a>

</body>

Sweet 04.05.2011 18:44

Нужно в цикле for проверять не <=, а <.
UPD: А еще было бы неплохо присвоить функцию переменной handler перед тем, как передавать ее, а то ж undefined передаешь.

Armen 04.05.2011 20:22

Цитата:

Сообщение от Sweet (Сообщение 103312)
Нужно в цикле for проверять не <=, а <.
UPD: А еще было бы неплохо присвоить функцию переменной handler перед тем, как передавать ее, а то ж undefined передаешь.

Но почему тогда, когда я добавляю ф-ю по id все работает и undefined не выводиться?

Sweet 04.05.2011 20:35

Цитата:

Сообщение от Armen
Но почему тогда, когда я добавляю ф-ю по id все работает и undefined не выводиться?

А можно код?

monolithed 04.05.2011 21:25

Armen, вы написали полный бред...
я понимаю, если нужно несколько событий повестить на элемент:
<script type="text/javascript">
window.onload = function() {
    var event = ['keyup', 'change'], 
		forma = document.forms['forma'], 
		i = forma.elements.length;
    while(i--) {
       forma['on'+event[i]] = function(i) {
           return function() {
		      var input = this.elements[0].value;
		      this.elements[1].value = input == '' ? '' : input;
           };
      }(i);
    }
};
</script>
<form name="forma">
    <input type="text" value="" />
    <input type="text" value="" />
</form>


однако в вашем случае, я уверен больше чем на 100% что вы пытаетесь получить примерно это:
<script type="text/javascript">
window.onload = function() {
    var div = document.getElementById('div').getElementsByTagName('a'), i = div.length;
    while(i--) {
       div[i].onclick = function(i) {
           return function() {
				alert(i);
			};
      }(i);
    }
};
</script>
<div id="div">
	<a href="#">click</a>
	<a href="#">click</a>
	<a href="#">click</a>
</div>

Armen 04.05.2011 22:33

Цитата:

Сообщение от monolithed (Сообщение 103353)
Armen, вы написали полный бред...
я понимаю, если нужно несколько событий повестить на элемент:
<script type="text/javascript">
window.onload = function() {
    var event = ['keyup', 'change'], 
		forma = document.forms['forma'], 
		i = forma.elements.length;
    while(i--) {
       forma['on'+event[i]] = function(i) {
           return function() {
		      var input = this.elements[0].value;
		      this.elements[1].value = input == '' ? '' : input;
           };
      }(i);
    }
};
</script>
<form name="forma">
    <input type="text" value="" />
    <input type="text" value="" />
</form>


однако в вашем случае, я уверен больше чем на 100% что вы пытаетесь получить примерно это:
<script type="text/javascript">
window.onload = function() {
    var div = document.getElementById('div').getElementsByTagName('a'), i = div.length;
    while(i--) {
       div[i].onclick = function(i) {
           return function() {
				alert(i);
			};
      }(i);
    }
};
</script>
<div id="div">
	<a href="#">click</a>
	<a href="#">click</a>
	<a href="#">click</a>
</div>

Тоесть вы хотите сказать, что addEventListener и attachEvent нужно использовать только тогда, когда необходимо "весить" несколько событий на один элемент?

и вы считаете, что этот код полная чушь ?
<script type="text/javascript">

window.onload = function()
{
	var aTag = document.getElementsByTagName("A");
	
	var handler = function() { alert("Hello") }

	addEvent( aTag, 'click', handler );
	

	for( var i = 0; i <= aTag.length; i ++ )
	{
		var links = aTag[i];
		addEvent( links, 'click', handler );			
	}
	
	
	
}

function addEvent(elem, evType, fn) {
	if (elem.addEventListener) {
		elem.addEventListener(evType, fn, false);
	}
	else if (elem.attachEvent) {
		elem.attachEvent('on' + evType, fn);
	}
	else {
		elem['on' + evType] = fn;
	}
}
</script>


<body>

<a href="#">Click</a>
<a href="#">Click</a>
<a href="#">Click</a>
<a href="#">Click</a>
<a href="#">Click</a>
<a href="#">Click</a>
</body>


Я новичек в js поэтому буду крайне признателен, если вы объясните, почему. Спасибо большое за помощь

Armen 04.05.2011 22:41

Цитата:

Сообщение от Sweet (Сообщение 103345)
А можно код?

Спасибо, помогло, переставил ф-ю в начало, кода, как вы и сказали

Armen 04.05.2011 23:11

Цитата:

Сообщение от Sweet (Сообщение 103345)
А можно код?

Работает везде, кроме IE8 и ниже, подскажите пожалуйста, в чем проблема:blink:

poorking 05.05.2011 06:48

Цитата:

Сообщение от Armen
or( var i = 0; i <= aTag.length; i ++ )

не может везде работать так как нет элемента aTag[aTag.length], уберите знак равно, вам же сказали.
Цитата:

Сообщение от Armen
Тоесть вы хотите сказать, что addEventListener и attachEvent нужно использовать только тогда, когда необходимо "весить" несколько событий на один элемент?

Если обработчик один то какой смысл пользоваться addEvent?


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