Про обработчики событий

[pomidor_makaronus]

Всем привет!

Кто может пояснить такое поведение обработчиков:
Данный пример работает если обработчик вешать на this...
Если же this заменить на bod[i] то не работает, хотя в bod[i] по идее нормальный елемент и если вывести его в консоль то мы увидим, что у него присутствует свойство className...

<style>
.mini {
  width: 200px;
  height: 30px;
}

.maxi {
  width: 600px;
  height: 300px;
}
</style>
        <div class="zid">
		<div  class="mini"></div>
		<div  class="mini"></div>
		<div  class="mini"></div>
	</div>

var bod = document.querySelectorAll(".mini");

for (var i = 0 ; i < bod.length; i++){
	bod[i].addEventListener("mouseover", function() {
		this.className = "maxi";
	}, false );

	bod[i].addEventListener("mouseout", function() {
		this.className = "mini";
	}, false );
	
}

т.е.

bod[i].addEventListener("mouseover", function() {
		bod[i].className = "maxi";
	}, false );

не работает .

[Decode]

pomidor_makaronus, когда цикл закончится i будет равно 3. А индекс элементов начинается с 0. Соответственно bod[3] - undefined.

И цикл тут не нужен, можно делегированием обойтись.

[pureJS]

bod[i].addEventListener("mouseover", function() {
		bod[i].className = "maxi";
	}, false );

pomidor_makaronus, когда ты присваиваешь обработчику "mouseover", то событие происходит не при присваивании, а позже и поэтому функция не знает ни объект "bod" ни переменную "i". Они лежат вне области видимости этой функции. При срабатывании события обработчик ссылается на объект, на котором он сработал и поэтому тут именно this надо применять.

Вот, в учебнике, всё подробно об этом:
Замыкания, область видимости