立即调用Javascript onclick函数（不是单击时）？答案

【问题标题】：Javascript onclick function is called immediately (not when clicked)?立即调用Javascript onclick函数（不是单击时）？
【发布时间】：2021-03-07 00:41:48
【问题描述】：

我正在尝试创建一个链接，它看起来和感觉都像 <a> 标记项，但运行的是一个函数而不是使用 href。

当我尝试将 onclick 函数应用于链接时，它会立即调用该函数，而不管链接从未被点击过。此后任何点击链接的尝试都会失败。

我做错了什么？

HTML

<div id="parent">
    <a href="#" id="sendNode">Send</a>
</div>

Javascript

startFunction();

function secondFunction(){
    window.alert("Already called!?");
}

function startFunction() {
    var sentNode = document.createElement('a');
        sentNode.setAttribute('href', "#");
        sentNode.setAttribute('onclick', secondFunction());
      //sentNode.onclick = secondFunction();
        sentNode.innerHTML = "Sent Items";

    //Add new element to parent
    var parentNode = document.getElementById('parent');
    var childNode = document.getElementById('sendNode');
    parentNode.insertBefore(sentNode, childNode);
}

JsFiddle

如你所见，我尝试了两种不同的方法来添加这个 onclick 函数，这两种方法的效果都是一样的。

【问题讨论】：

因为你是立即调用它secondFunction()，传递一个函数你只需使用它的名字secondFunction
这是一个函数调用与函数引用的问题。更多信息：stackoverflow.com/questions/11757075/…
@PatrickEvans 这就是我最初的想法，但这样做根本不会运行该功能。
然后你需要查看你的控制台是否有错误，例如你的 jsfiddle 会抛出一个错误，因为你已经将它设置为让你的代码在头部执行而不是使用像 onload 这样的 dom 就绪事件

标签： javascript html onclick

【解决方案1】：

你想要.onclick = secondFunction

不是 .onclick = secondFunction()

后者调用（执行）secondFunction，而前者传递对 secondFunction 的引用以在 onclick 事件上调用

function start() {
  var a = document.createElement("a");
  a.setAttribute("href", "#");
  a.onclick = secondFunction;
  a.appendChild(document.createTextNode("click me"));
  document.body.appendChild(a);
}

function secondFunction() {
  window.alert("hello!");
}

start();

你也可以使用elem#addEventListener

a.addEventListener("click", secondFunction);

// OR

a.addEventListener("click", function(event) {
  secondFunction();
  event.preventDefault();
});

【讨论】：

@leigero — JS Fiddle 中的代码与此答案中的代码不匹配
@leigero：你的小提琴当然行不通。然而，答案是有效的。
@leigero 是的，它确实有效。请参阅附加的 sn-p。
谢谢。愚蠢的错误，只是通过尝试在 JsFiddle 中解决问题而变得复杂。