如何在我的 evenlistener 上传递一个参数而不在页面加载时触发该函数？ [复制]

Posted 2023-02-21

【中文标题】如何在我的 evenlistener 上传递一个参数而不在页面加载时触发该函数？ [复制]

【英文标题】：How can i pass an argument on my evenlistener without it firing the function when the page loads? [duplicate]

【发布时间】：2020-08-08 08:31:52

【问题描述】：

我想创建一个三向切换，当用户单击选项时，我想显示他们选择的选项（并移动选择器 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 函数：

 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 时向函数传递参数？

谢谢大家！

【参考方案1】：

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

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

【讨论】：

也可以使用bind()。