如何将变量传递给事件处理程序？

Question

如果我的问题对于 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 */

我的第一次尝试是在 for 循环末尾添加“onclick”：

frame.onclick= function ()  { 
        var largeImage = document.getElementById('largeImage');
   largeImage.style.display = 'block';
   largeImage.style.width=200+"px";
   largeImage.style.height=200+"px";
   var url=largeImage.getAttribute('src'); 

   document.getElementById('slides').style.display = 'block';
    document.getElementById("slides").innerHTML="<img src='url' />"; 

    } 

但是，这可能仅适用于硬编码的 ID（例如“largeImage”）。 理想情况下，我需要传递 image.src 作为参数，但是这个

(frame.onclick= function (image.src))

不起作用。 我的下一个想法是将获取 image.src 的所有逻辑放入一个单独的函数并用

frame.onclick= myFunction;

显示它 不过，我举了一个例子：

<input type="button" value="Click me" id="elem">
<script>
  elem.onclick = function(event) {
    // show event type, element and coordinates of the click
    alert(event.type + " at " + event.currentTarget);
    alert("Coordinates: " + event.clientX + ":" + event.clientY);
  };
</script>

在这里，我无法理解为什么在这个例子中处理程序可以接受参数。

将图像分配给 onclick 事件的正确方法是什么？或者有没有更好的方法将缩略图变成href？

Answer 1

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

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

然后在 onclick 上，您可以访问缩略图元素并获取其数据属性。

function onClick(event){
    var fullSizePath = event.currentTarget.getAttribute("data-fullSizeImage");

    //Do whatever you want with fullsizepath
}

代码未经测试；但是，根据我的经验，类似的事情应该有效。

数据属性是一个非常灵活的自定义属性，供开发者使用。本质上，您从“data-”开始，然后附加一个名称来表示该属性。这是文档链接。

Answer 2

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

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

但是，这不太有效，因为变量

i

每次循环增加时都会更改，并且闭包不会“捕获”当前值，仅捕获引用本身，所以最后

i

对于每个事件侦听器将等于

numImages

。

如果您使用 ES6，您可以通过 使用

let

（或

const

） 来解决此问题：

for (let 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 */
}