問題與addEventListener和目標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 s的工作。但是，在Google Chrome的警報窗口中，它將引發我undefined而不是.MYCLASS。

所以，我想這個代碼替代：

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

但結果是完全一樣的。任何幫助表示讚賞，謝謝！

Answer 1

這是因爲沒有名爲class一個html DOM對象定義的屬性。

如果你想獲得班級價值，你應該使用this.className。

所以你的函數應該是這樣的：

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

Answer 2

您可以使用一個簡單的'for in'循環，但您需要確保您將事件追加到僅DOM元素。 getElementsByClassName（）返回的HTML列表不僅返回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); 
 
}