Tengo un botón al que le he añadido un evento para que, cuando se haga clic en él, muestre por consola el mensaje "Hola". Sencillo ¿verdad? Pues tengo dudas :S.
Cuando pongo en el segundo parámetro del addeventlistener el nombre de la función con paréntesis, para invocarla, al cargar la página aparece el "hola" por consola sin haber hecho clic en el botón y no entiendo porqué. Y cuando le doy al botón, no hace nada. Dejo abajo el código:
<button id="saludar">Saludar</button>
<script >
let btnSaludar = document.getElementById("saludar");
btnSaludar.addEventListener("click", saludar());
function saludar() {
console.log("Hola!")
}
</script>
Sin embargo, si le quito los paréntesis a la función y no la invoco, funciona correctamente y sólo muestra el "hola" por consola cuando hago clic en el botón, que es el comportamiento que quiero. El problema es que no entiendo porqué tengo que quitarle los paréntesis porque, en el caso de que necesite pasarle algún parámetro, como el nombre para que salude diciendo "Hola Pepito", ¿cómo lo tendría que hacer?
<button id="saludar">Saludar</button>
<script >
let btnSaludar = document.getElementById("saludar");
btnSaludar.addEventListener("click", saludar);
function saludar() {
console.log("Hola!")
}
</script>
Gracias de antemano