Question

我正在尝试使用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");
    }
}

Answer 1

如果您正在divSelect.onclick = addRed(divSelect);正在发生的事情是它调用addRed(divSelect)，并将其返回值设置为onclick。如果您实际返回所需的功能，那就没关系了，但在大多数情况下，并非如此。这就是你需要将它包装在一个匿名函数中的原因。

另一种选择是使用Function.bind()：

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

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

1 个答案: