addEventListener

[maluz1]

ho appena finito di implementare una sorta di menu dinamico e volevo assegnare ad ogni voce di un sottomenu un certo comportamento definito da un evento. Aggiungo gli eventi che voglio rilevare grazie a addEventListener, ma funziona "per metà".

var items= window.document.getElementsByClassName("Item");  // la classe di ogni voce del sottomenu
    	  	var index= 0;
    	  	
    	  	for( var i= 0; i < items.length; ++i )
			{	
				index= i;
				
				items[i].addEventListener("mouseenter", function(){
					items[index].style.background= "rgba(255, 255, 255, 0.3 )";
				}, false );
				
				items[i].addEventListener("mouseleave", function(){
					items[index].style.background= "black";
				}, false );
			}

le voci sono solo due ma gli eventi funzionano solamente con la seconda voce, anzi anche il comportamento della seconda è strano:

- quando il mouse entra nella prima voce si attiva l'evento onmouseenter della seconda voce
- ma solo quando il mouse esce da entrambe le voci si attiva l'evento onmouseleave della seconda voce

[tampertools]

prova a riferirti all'elemento con this anziché con items[index]...

Provo a spiegarti perché (considera questa lista una "linea del tempo")

1. Inizia il ciclo for
2. index vale 0
3. seconda "passata" del ciclo
4. index vale 1
   
5. Entro od esco con il mouse su un elemento
6. Si scatena l'evento

7. items[index]

   ma quanto vale index? (vai a vedere al punto 4)

Quindi

var items = document.getElementsByClassName("Item");  // la classe di ogni voce del sottomenu
for (var i= 0; i < items.length; ++i) {
    items[i].addEventListener("mouseenter", function(){
        this.style.background= "rgba(255, 255, 255, 0.3 )";
    }, false );
    items[i].addEventListener("mouseleave", function(){
        this.style.background= "black";
    }, false );
}

[maluz1]

grazie mille! non ci avevo pensato a quello.

comunque ho già risolto in un altro modo usando jquery:

$('.Item').bind("mouseenter", function(){
					$(this).css("background", "rgba(255, 255, 255, 0.3 )");
				});
				
				$('.Item').bind("mouseleave", function(){
					$(this).css("background", "black");
			        });

grazie ancora!

[tampertools]

Puoi ancora abbreviare così

$('.Item').mouseenter(function(){
    $(this).css("background", "rgba(255, 255, 255, 0.3 )");
});


$('.Item').mouseleave(function(){
    $(this).css("background", "black");
});