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事件监听器让我困惑

回答

相关问题