addEventListener點擊不觸發功能

Question

這個問題的解決方案可能很簡單，但我需要一些幫助。

var x; 
for(x in document.getElementsByTagName("img")) 
    x.addEventListener('click',openPage, false); 

function openPage() { 
    alert("clicked"); 
} 

當我點擊<img src="something" />標籤時，我沒有收到警報。有人知道爲什麼另外，我的循環是必要的嗎？

Answer 1

此代碼會產生一個錯誤 - 在for..in語句中，'x'是您的對象的鍵（在這種情況下，您的document.getElementsByTagName調用）。你想要的是：

var x, 
    imgs = document.getElementsByTagName("img"); 

for(x in imgs) { 
    if (imgs[x] instanceof Element) { 
     imgs[x].addEventListener('click',openPage, false); 
    } 
} 

function openPage() { 
    alert("clicked"); 
} 

我可以建議使用JavaScript框架（如jQuery），它可以幫助簡化您的代碼，例如：

$('img').each(function() { 
    $(this).click(function() { 
     alert('Clicked!'); 
     // Now that we're in the callback context, $(this) will be the current 
     // target - the specific image that was clicked. 
     // i.e. $(this).fadeOut() would slowly fade out the clicked image. 
    }); 
});