在 addEventListener 外部声明的 JavaScript 函数不起作用

Question

我试图声明一个函数并在 JavaScript 中的几个 addEventListeners 中重用它，但是当我这样做时，整个函数都不起作用。另一方面，当我使用相同的代码制作匿名函数时，一切都很好。这是不起作用的代码:

damianImg.addEventListener("mouseover", imageChanging());
damianImg.addEventListener("mouseleave", imageChanging());

function imageChanging(){
if(damianImg.src.indexOf("media/damian.jpg") != -1){
    damianImg.src = ("media/damian2.jpg");
} else if(damianImg.src.indexOf("media/damian2.jpg") != -1){
    damianImg.src = ("media/damian3.jpg");
} else {
    damianImg.src = ("media/damian.jpg");
}
}

这是一段有效的代码:

damianImg.addEventListener("mouseover", function(){
if(damianImg.src.indexOf("media/damian.jpg") != -1){
    damianImg.src = ("media/damian2.jpg");
} else if(damianImg.src.indexOf("media/damian2.jpg") != -1){
    damianImg.src = ("media/damian3.jpg");
} else {
    damianImg.src = ("media/damian.jpg");
}
})

damianImg.addEventListener("mouseleave", function(){
if(damianImg.src.indexOf("media/damian.jpg") != -1){
    damianImg.src = ("media/damian2.jpg");
} else if(damianImg.src.indexOf("media/damian2.jpg") != -1){
    damianImg.src = ("media/damian3.jpg");
} else {
    damianImg.src = ("media/damian.jpg");
}
})

哪里出错或者为什么不能使用外部函数？我还想制作一个可以接受参数的函数，这样我就可以将它用于不同的图片，但现在即使在这种简单的情况下它也不起作用。

Answer 1

您必须传递该函数而不调用它，否则您将传递 imageChanging 的返回值，该值是 undefined。

damianImg.addEventListener("mouseleave", imageChanging);

如果您想使用带参数的函数，您可以将参数传递给imageChanging 并返回一个函数。

function click(label) {

    return function() {
        console.log(`[${label}] click`)
    }
}

damianImg.addEventListener('click', click('damian'));
fooImg.addEventListener('click', click('foo'));

您还可以使用 .bind 来传递参数。

function click(label, event) {
    console.log(`[${label}] click`)
}

damianImg.addEventListener('click', click.bind(damianImg, 'damian'));
fooImg.addEventListener('click', click.bind(fooImg, 'foo'));

或者只是将其包装在一个函数中并调用 imageChanging

damianImg.addEventListener("mouseleave", () => imageChanging('argument'));