[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 );

не работает .