将参数传递给onchange（）函数

Question

我正在尝试创建一个图像滑块，在其中移动滑块上的手柄将更改要显示的图像。

在下面的代码中，我使用onchange函数根据滑块的当前值（id =“ image-slider-response”）动态更新图像（id =“ image”）。

     var imageGroup1 = ['imageA.jpg','imageB.jpg','imageC.jpg'];
     var slide = document.getElementById('image-slider-response');
     var imageDiv = document.getElementById("image");
     slide.onchange = function() {
         imageDiv.src = imageGroup1[this.value];
     }

现在，我试图将imageGroup作为参数传递给onchange函数，以将上面的代码扩展到其他图像组。 我点击了此链接http://www.jstips.co/en/javascript/passing-arguments-to-callback-functions/，但似乎没有用。 有什么建议可以解决这个问题吗？

    var imageGroup1 = ['imageA.jpg','imageB.jpg','imageC.jpg'];
    var imageGroup2 = ['imageD.jpg','imageE.jpg','imageF.jpg'];
    var slide = document.getElementById('image-slider-response');
    var imageDiv = document.getElementById("image");

    function myFunction(x){
        return function(){
            sliderDiv.innerHTML = slide.value;
            imageDiv.src = x[slide.value];
        }
    }
    var imageGroup = imageGroup1;
    slide.addEventListener("onchange", myFunction(imageGroup));

Answer 1

您在正确的位置进行了回调，只有一件事-使用addEventListener ，请不要在事件前加上on ：仅使用简单事件名称即可。

slide.addEventListener("change", myFunction(imageGroup));