JavaScript - 为 <a> 的 onclick 属性添加了功能，无需单击即可运行答案

【问题标题】：JavaScript - added function to onclick attribute of <a> runs without clickJavaScript - 为 <a> 的 onclick 属性添加了功能，无需单击即可运行
【发布时间】：2013-06-27 16:21:29
【问题描述】：

我有一个函数可以创建一个新的<a> 元素，我想向它添加一个 onclick 事件，这是一个将给定值增加 1 的函数。

在函数中，我创建了这些元素：

跨标签中的数字：

        var spantags = document.createElement("span");
        var anzahl = 1;
        spantags.innerHTML = anzahl;

还有提到的<a>元素：

        var plus = document.createElement("a");
        plus.innerHTML = "+";
        plus.onclick = more(spantags.innerHTML);

然而，This 已在创建 this 的函数中执行了该函数，因此在创建时将数量增加到 2。

我在类似问题上阅读了此答案： https://stackoverflow.com/a/249084/1972372

此示例有效，仅在单击 + 时才出现警报，但它是那里的内部函数，而不是像我的“更多（元素）”那样声明的函数。

所以我的问题是：是否可以像在我的示例中那样将 onclick 属性设置为新创建元素上的声明函数，但阻止它立即运行？

（另一篇文章也有jQuery的答案，可惜我对jQuery一无所知，无法使用）

【问题讨论】：

标签： javascript html function onclick

【解决方案1】：

是的，只需将其包装在“代理”函数中：

plus.onclick = function() {
    more(spantags.innerHTML);
};

【讨论】：

哇，这么简单！非常感谢！

【解决方案2】：

当然，但首先您必须了解plus.onclick = more(spantags.innerHTML); 将使用参数spantags.innerHTML 调用more，并将从该函数调用返回的结果分配给plus.onclick。

您可以按照前面的建议将其包装在代理函数中，或者您可以利用bind 方法将参数绑定到函数本身：

plus.onclick = more.bind(null, spantags.innerHTML);

在此处阅读绑定：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

【讨论】：

这实际上不会有相同的结果。您将绑定 spantags.innerHTML 的当前值（绑定时为“1”），并且永远不会超过 2
它实际上适用于此，所以我也会对此表示赞同，但我对第一个参数是什么感到困惑。我读到这是这个论点，但我仍然不明白。我接受了第一个答案，因为它更容易理解。
这是“this”上下文。在回调本身中，使用“this”将引用您作为第一个参数传入的任何内容（在本例中为“null”）。