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'));

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

1 个答案: