在使用JavaScript的事件（onclick）调用的函数中使用参数

我正在尝试使用JavaScript创建onclick事件。我希望onclick事件触发一个函数。我发现，如果在没有参数或括号的情况下调用函数，则在单击元素时调用函数

但是，如果我尝试向函数添加参数，函数将立即被调用，甚至在单击元素之前

我发现，如果我使用一个匿名函数，并将onclick事件要调用的函数放在匿名函数中，它就会工作

我不明白为什么。一定有一些我没有理解的逻辑

我是编程新手，如果有人能帮助我理解为什么不能简单地用onclick事件的参数调用函数，我将不胜感激。 谢谢

这是我的代码，可以工作

window.onload = init;

function init() {
    var divSelect = document.querySelector(".basic");
    divSelect.onclick = function () {addRed(divSelect)};

}

function addRed(el) {
    var divClass = el.getAttribute("class");

    if (divClass == "basic red") {
        el.setAttribute("class", "basic");
    }
    else {

        el.setAttribute("class", "basic red");
    }
}

---

如果您正在执行

divSelect.onclick=addRed（divSelect）所发生的事情是，它调用
addRed（divSelect）
，并将其返回值设置为
onclick
。如果你真的返回了你想要的函数，那也没关系，但在大多数情况下，它不是。这就是为什么需要将其包装在匿名函数中

另一种选择是使用：

旁注：您有多少个带有
class=“basic”
的元素？因为如果不止一个，这就不太好用。。不要使用
addRed（divSelect）
，而是尝试使用
addRed（this）
（作为一般规则）。谢谢。我正在返回值。所以我实际上是在事件发生之前运行函数，对吗？我想在onclick上执行。我将进一步研究何时添加括号以及何时取消括号。非常感谢！是的，你马上就可以运行这个函数了。
divSelect.onclick = addRed.bind( // bind a context and pre-fill arguments
    divSelect, // the context, can be anything in this case
    divSelect); // the pre-filled argument