addeventlistener does not work with passing parameters

Question

I have two inputs that both have an id, and I have a button with an oncick event attached (directly in HTML) that takes the value of both input fields, now I intend to separate the javascript in a separate file but I cannot link the javascript function, below everything docked in the HTML file:

<input type="file" id="imgPC">
<input type="text" id="imgWEB">
<input type="button" onclick="exibeImagem(imgPC.value, imgWEB.value)" id="btnEnviaImg" value="Enviar"/>
<script type="text/javascript">
     function exibeImagem(imgPCValue, imgWEBValue){
          alert(imgPCValue);
          alert(imgWEBValue);
     }
</script>

As I did with the separate file (I removed the onclick from the input and put the method inside the separate file) this way does not work:

window.onload = function(){
     var btnEnviaImg = document.getElementById("btnEnviaImg");
     btnEnviaImg.addEventListener("click",exibeImagem(imgPC.value, imgWEB.value),false);
}

Answer 1

When you pass a callback function as parameter it is impossible to pass parameters directly, because when you add the parentheses, js executes the function, i.e., you are passing the function result as parameter, not the function itself.

What you can do is create an anonymous function to call the function with the desired parameters:

btnEnviaImg.addEventListener("click", function() {
    exibeImagem(imgPC.value, imgWEB.value);
}, false);

Answer 2

When you use nomeFuncao(arg_A, arg_B) you’re running the function. Or whatever the addEventListener will use as argument is what this function return... is not what you want to use.

If the Ids are fixed you should do so:

btnEnviaImg.addEventListener("click", function(event){
    var imgPCValue = document.getElementById('imgPC').value;
    var imgWEBValue = document.getElementById('imgWEB').value;
    alert(imgPCValue);
    alert(imgWEBValue);
},false);

You can also define the function separately and pass as argument later:

function handler(event){
    var imgPCValue = document.getElementById('imgPC').value;
    var imgWEBValue = document.getElementById('imgWEB').value;
    alert(imgPCValue);
    alert(imgWEBValue);
}
btnEnviaImg.addEventListener("click", handler,false);

If these Ids are not fixed or you want to have a DOM relationship between the clicked element you can do so, taking into account that the this within that function handler is the element clicked.

function handler(event){
    var imgPC = this.previousSibling;
    var imgWEB = imgPC.previousSibling;
    var imgPCValue = imgPC.value;
    var imgWEBValue = imgWEB.value;
    alert(imgPCValue);
    alert(imgWEBValue);
}
btnEnviaImg.addEventListener("click", handler,false);