Problem mit addEventListener & Ziel Clic in meiner Website

Question

Ich spiele mit HTML, CSS & JavaScript, aber ich bin nicht sehr gut. Ich versuche, die folgenden:

<script type="text/javascript"> 
var tab = document.getElementsByClassName("MYCLASS"); 
for(var i = 0, j=tab.length; i<j; i++){ 
tab[i].addEventListener('click', afficher,false); 
} 
function afficher(){ 
alert(this.class); 
} 
</script> 

Anbringen des Klick-Listener auf alle meine .MYCLASSdiv s arbeitet. Aber in Google Chrome im Alarmfenster wirft es mich undefined anstelle von .MYCLASS.

Also habe ich versucht, diesen Code als Alternative:

function afficher(e){ 
    var target = e.target || e.srcElement; 
    var $target = $(e.currentTarget); 
    alert(target.class); 
} 

Aber das Ergebnis ist genau das gleiche. Jede Hilfe wird geschätzt, danke!

Answer 1

Dies ist, weil es keine Eigenschaft für ein html DOM-Objekt namens class definiert ist. Wenn Sie den Klassenwert erhalten möchten, sollten Sie this.className verwenden.

So sollte Ihre Funktion wie folgt aussehen:

function afficher(){ 
    alert(this.className); 
} 

Answer 2

Sie können einfach eine einfache "for in" -Schleife verwenden, aber Sie müssen sicherstellen, dass Sie Ereignisse nur an DOM-Elemente anhängen. Die HTML-Liste, die von getElementsByClassName() zurückgegeben wird, gibt nicht nur DOM-Elemente zurück.

var tab = document.getElementsByClassName("MYCLASS"); 
 

 
for(var i in tab){ 
 

 
    // you need this check to filter anything that isn't a DOM element 
 
    if(typeof tab[i] ==="object"){ 
 
    tab[i].addEventListener('click', afficher,false); 
 
    } 
 

 
} 
 

 
function afficher(){ 
 
    alert(this.className); 
 
}