JavaScript function declared outside addEventListener does not work

Question

I tried to declare a function and reuse it in a few addEventListeners in JavaScript, however when I do that, the whole function does not work. On the other hand, when I use the same code making anonymous functions, everything is okay. This is the code that doesn't do the job:

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");
}
}

And here is a piece of code that works:

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");
}
})

Where is an error or why is it not possible to use an external function? I also wanted to make a function that would take parameters so I could use it for different pictures but for now even in this simple case it does not work.

Answer 1

You have to pass the function without calling it, otherwise you're passing the returned value of imageChanging which is undefined .

damianImg.addEventListener("mouseleave", imageChanging);

If you want to use a function that takes parameters, you can pass parameters to imageChanging and return a function.

function click(label) {

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

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

You can also use .bind to pass arguments.

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

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

Or just wrap it in a function and call imageChanging

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