I have the following code, which works as intended

let userNameEl = document.querySelector("#username");
let startGameBtn = document.querySelector(".start-game");

startGameBtn.addEventListener("click", () => {
    if (!userNameEl.value) {
        alert("Please enter player name");
    }
}); 

But when I define the eventhandler in a separate file, the result isn't what I intended

import * as Utils from "./utils.js";

let userNameEl = document.querySelector("#username");
let startGameBtn = document.querySelector(".start-game");

startGameBtn.addEventListener("click",Utils.validatePlayerName(userNameEl));

The logic of validatePlayerName is similar to that of the anonymous function of the first addEventListener, but the result is different. It looks like Utils.validatePlayerName(userNameEl)) runs before click event is assigned.