Проблема с addEventListener & target clic на моем сайте

Question

Я играю с HTML, CSS & JavaScript, но я не очень хорош. Я пытаюсь следующее:

<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> 

Прикрепление щелчка слушателя на все мои .MYCLASSdiv с работают. Тем не менее, в Google Chrome в окне предупреждения он бросает мне undefined вместо .MYCLASS.

Так что я попробовал этот код в качестве альтернативы:

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

Но результат точно такой же. Любая помощь приветствуется, спасибо!

Answer 1

Это происходит потому, что нет никакой собственности определяется для объекта html DOM с именем class.

Если вы хотите получить значение класса, вы должны использовать this.className.

Так что ваша функция должна выглядеть следующим образом:

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

Answer 2

Вы можете просто использовать простой цикл «for in», но вы должны быть уверены, что добавляете события только к элементам DOM. Список HTML, возвращаемый getElementsByClassName(), не только возвращает элементы DOM.

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