Javascript事件監聽器讓我困惑

我很困惑。我想要構建一個畫廊，您可以點擊任何圖像，並將全尺寸圖像疊加在文檔上（有點像Facebook畫廊）。Javascript事件監聽器讓我困惑

畫廊的縮略圖會顯示一些PHP。它看起來像這樣：

$i = 0; 

while($img_dir = mysqli_fetch_assoc($gallery_q)) 
{ 
    $i++; 

    echo 
    ' 
     <div class="entry"><div class="image" id="' . $img_dir['dir'] . '"> 
<img id="img' . $i . '" src="' . $img_dir['thumb_dir'] . '" /></div></div> 
    '; 

}

我然後取得與json_encode圖像的數量，併產生一串事件偵聽器與一個循環，像這樣：

for(var i = 1; i <= nbImg; i++) 
{ 
    document.getElementById("img" + i).addEventListener("click", display(i)); 
}

顯示功能在下面的：

function display(i) 
{ 
document.getElementById("body").insertAdjacentHTML("afterBegin", 
'<div id="display"><div><img src="' + document.getElementById("img" + i).parentNode.getAttribute("id") + '"></div>'); 

style.insertAdjacentHTML("beforeend", 
"#display{z-index: 20; position: fixed; width: 1000px; height: 1000px; left: 50%; top: 10%; margin-left: -600px;"); 

}

嗯，它的工作原理..除了display（）被調用沒有任何問候我是否點擊圖像或不。但是，當我將這種行爲限制爲只有一個圖像時（即事件偵聽器不在循環中並且沒有參數傳遞給該函數;它只是顯示預設圖像），則一切正常。點擊時觸發事件。

實際上，這並不是我第一次遇到這種現象，即觸發的監聽功能，而不管我要求事件監聽器監聽的事件。它發生的最常見的警報，我真的不明白爲什麼。有人能幫我嗎？

來源

2015-03-02 Afunakwa

你不能指定這樣的功能。添加()會立即調用該函數（傳遞函數，省略() - 但您也將失去傳遞i的能力，event將被傳入，因爲它是第一個傳遞給addEventListener函數的參數）：

document.getElementById("img" + i).addEventListener("click", function() { 
    display(i); 
});

你可能會注意到，i總是最後一個迭代循環變種，所以你要在一個封閉包這樣的：

for(var i = 1; i <= nbImg; i++) { 
    (function(i) { 
     document.getElementById("img" + i).addEventListener("click", function() { 
      display(i) 
     }); 
    })(i); 
}

來源

2015-03-02 14:20:20 tymeJV

完美地工作，謝謝！ – Afunakwa 2015-03-02 14:42:48

的原因顯示被稱爲與此有關碼。您正在調用顯示功能而不是引用它。用閉包代替顯示功能。

for (var i = 1; i <= nbImg; i++) { 
    document.getElementById("img" + i).addEventListener("click", function() { 
    display(i) 
    }); 
}

來源

2015-03-02 14:22:51

你已經正確解釋了這個問題。解決方案如何？建議更新我的答案 – Seth 2015-03-02 14:25:00

。 – 2015-03-02 14:37:23

謝謝，它的工作原理，我現在明白你的歡迎 – Afunakwa 2015-03-02 14:43:14

Javascript事件監聽器讓我困惑

回答

相關問題