Javascript 如何在页面加载时在不触发函数的情况下在我的evenlistener上传递参数？

我想创建一个三向切换，当用户单击option时，我想显示他们选择了哪个选项（并移动selector div以显示此选项）

因此，每个选项都有一个事件侦听器：

document.getElementById("option1").addEventListener("mouseover", UIController.changeSelection("option1"));
document.getElementById("option2").addEventListener("mouseover", UIController.changeSelection("option2"));
document.getElementById("option3").addEventListener("mouseover", UIController.changeSelection("option3"));

 changeSelection: (function(choice) {
        var option1 = document.getElementById("option1");
        var option2 = document.getElementById("option2");
        var option3 = document.getElementById("option3");
        var selector = document.getElementById("selector");
        if (choice === "option1") {
            selector.style.left = 0;
            selector.style.width = option1.clientWidth + "px";
            selector.style.backgroundColor = "#777777";
            selector.innerHTML = "Option 1";
        } else if (choice === "option2") {
            selector.style.left = option1.clientWidth + "px";
            selector.style.width = option2.clientWidth + "px";
            selector.innerHTML = "Option 2";
            selector.style.backgroundColor = "#418d92";
        } else {
            selector.style.left = option1.clientWidth + option2.clientWidth + 1 + "px";
            selector.style.width = option2.clientWidth + "px";
            selector.innerHTML = "Option 3";
            selector.style.backgroundColor = "#4d7ea9";
        }
    })

然后调用changeSelection函数：

document.getElementById("option1").addEventListener("mouseover", UIController.changeSelection("option1"));
document.getElementById("option2").addEventListener("mouseover", UIController.changeSelection("option2"));
document.getElementById("option3").addEventListener("mouseover", UIController.changeSelection("option3"));

 changeSelection: (function(choice) {
        var option1 = document.getElementById("option1");
        var option2 = document.getElementById("option2");
        var option3 = document.getElementById("option3");
        var selector = document.getElementById("selector");
        if (choice === "option1") {
            selector.style.left = 0;
            selector.style.width = option1.clientWidth + "px";
            selector.style.backgroundColor = "#777777";
            selector.innerHTML = "Option 1";
        } else if (choice === "option2") {
            selector.style.left = option1.clientWidth + "px";
            selector.style.width = option2.clientWidth + "px";
            selector.innerHTML = "Option 2";
            selector.style.backgroundColor = "#418d92";
        } else {
            selector.style.left = option1.clientWidth + option2.clientWidth + 1 + "px";
            selector.style.width = option2.clientWidth + "px";
            selector.innerHTML = "Option 3";
            selector.style.backgroundColor = "#4d7ea9";
        }
    })

但是，通过将（）添加到我的事件侦听器中，它会立即启动函数，然后不再工作

使用EventListener时，如何向函数传递参数？

---

谢谢大家

您可以按如下方式添加函数定义：

document.getElementById("option1")
        .addEventListener("mouseover", () => UIController.changeSelection("option1"));

---

可以按如下方式添加函数定义：

document.getElementById("option1")
        .addEventListener("mouseover", () => UIController.changeSelection("option1"));

使用

bind（）

也是一个选项。使用

bind（）

也是一个选项。