Javascript-将变量传递给事件处理程序

如果我的问题对JS专家来说微不足道，请道歉。 我已经创建了一个图像滑块（旋转木马），在加载缩略图时，我试图创建一个对全尺寸图像的引用，这样当单击缩略图时，图像就会在另一个div中打开

window.onload处理程序中的相关代码为：

for (var i = 0; i < numImages; ++i) {
    var image = images[i],
        frame = document.createElement('div');
    frame.className = 'pictureFrame';
    /* some styling skipped */
    carousel.insertBefore(frame, image);
    frame.appendChild(image);

  } /* for */

在这里，我很难理解为什么在这个例子中处理程序可以接受一个参数

---

将图像分配给onclick事件的正确方法是什么？或者是否有更好的方法将缩略图转换为href？

虽然这可能不是最好的方法，但您可以将全尺寸图像路径作为数据属性放置在缩略图上

<img id="thumbnail" src="thumbnailpath" data-fullSizeImage="fullSizePath">

代码未经测试；但是，根据我的经验，这样的事情应该行得通

数据属性是供开发人员使用的非常灵活的自定义属性。基本上，您从“data-”开始，然后附加一个名称来表示属性。以下是。

您可以创建（即匿名函数）并将其注册为事件处理程序，以从事件处理程序外部访问事件处理程序本身内部的变量：

for (var i = 0; i < numImages; ++i) {
    /* create element */
    element.addEventListener('click', function (event) {
        console.log('The index is ' + i);
    });
}

如果使用ES6不是一个选项，您仍然可以在ES5和更早版本中完成这一点，方法是将循环内部包装在一个函数中，该函数将

i

作为参数，这确保每个事件处理程序引用不同的变量，因为这些参数对于每个迭代都是不同的变量：

for (var i = 0; i < numImages; ++i) {
    (function (index) {
        /* create element */
        element.addEventListener('click', function (event) {
            console.log('The index is ' + index);
        });
     })(i); /* pass in i here, which will be assigned to the index parameter */
} 

for（变量i=0；i

浏览器调用元素的

。onclick

时，它会将当前的

ClickEvent

作为参数传递。通过为函数提供单个参数，您可以获取

ClickEvent

并读取其信息。如果您需要早期可用的其他信息，可以将其存储在元素本身中：

frame.setAttribute（“数据url”，url）。在onclick处理程序中，您可以执行
var url=this.getAttribute（“数据url”）
读回信息。“或者有没有更好的方法将缩略图转换为href？”最简单的方法就是将图像包装在
标签中，您尝试过了吗？谢谢，这似乎是向前迈出的一步。虽然必须使用var url=event.target.attributes.getNamedItem（'data-fullSizeImage'）.value；相反，@user2097141在处理
event.target时要小心。它和
event.currentTarget
可能有非常不同的结果。我发现
event.currentTarget
更加可靠和可预测；因为，它总是指事件附加到的元素。我同意，这似乎返回了正确的图像路径：var url=event.currentTarget.attributes.getNamedItem（'data-fullSizeImage'）.value；谢谢你的帮助！现在需要了解如何使用url和div id在其div中显示大型图像，但这是另一个问题。您可以将图像放置在div中，或者尝试设置div的背景图像。将图像放置在div中可能会更容易，主要是因为图像大小。别忘了接受这个问题的答案。：）
function onClick(event){
    var fullSizePath = event.currentTarget.getAttribute("data-fullSizeImage");

    //Do whatever you want with fullsizepath
}

for (var i = 0; i < numImages; ++i) {
    /* create element */
    element.addEventListener('click', function (event) {
        console.log('The index is ' + i);
    });
}

for (let i = 0; i < numImages; ++i) {
    /* create element */
    element.addEventListener('click', function (event) {
        console.log('The index is ' + i);
    });
}

for (var i = 0; i < numImages; ++i) {
    (function (index) {
        /* create element */
        element.addEventListener('click', function (event) {
            console.log('The index is ' + index);
        });
     })(i); /* pass in i here, which will be assigned to the index parameter */
}