Tengo el siguiente código, que funciona según lo previsto

 let userNameEl = document.querySelector("#username"); let startGameBtn = document.querySelector(".start-game"); startGameBtn.addEventListener("click", () => { if (!userNameEl.value) { alert("Please enter player name"); } });

Pero cuando defino el controlador de eventos en un archivo separado, el resultado no es lo que pretendía

 import * as Utils from "./utils.js"; let userNameEl = document.querySelector("#username"); let startGameBtn = document.querySelector(".start-game"); startGameBtn.addEventListener("click",Utils.validatePlayerName(userNameEl));

La lógica de validatePlayerName es similar a la de la función anónima del primer addEventListener, pero el resultado es diferente. Parece que Utils.validatePlayerName(userNameEl)) se ejecuta antes de que se asigne el evento de clic.