Question

我很困惑。我想构建一个画廊，您可以点击任何图像，并在文档上叠加全尺寸图像（有点像Facebook画廊）。

图库的缩略图会显示一些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（）之外没有任何关于我是否点击图像的问题。但是，当我将此行为限制为仅一个图像时（即，事件监听器不在循环中且没有参数传递给函数;它只显示预设图像）然后一切正常。单击时会触发该事件。

实际上，这并不是我第一次遇到触发侦听功能的现象，而不管我要求事件监听器关注什么事件。它经常发生警报，老实说，我无法弄清楚原因。有人能帮助我吗？

Answer 1

你无法分配这样的功能。添加()会立即调用该函数（传递函数，省略() - 但您也将失去传递i的能力，event会而是传入，因为它是传递给addEventListener的函数的第一个参数：）

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

您可能会注意到i始终是最后一个迭代循环var，因此您希望将其包装在闭包中：

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

Answer 2

调用显示的原因与此代码有关。你正在调用显示功能而不是引用它。用闭包替换显示功能。

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

Javascript事件监听器让我困惑

2 个答案: