javascript - 调用函数后不自动点击链接

Question

我有一个麻烦的功能，可能之前已经在某个地方得到了解答，但我做了一些搜索，但大脑完全卡住了。所以我有这个代码:

function createTimeLink(){
    var link = document.createElement('a');
    link.id = "link_"+vooru_nr;
    link.textContent = "VOOR "+vooru_nr;
    link.onclick = timeHelper();
    var headrow = document.getElementsByClassName("elem_"+vooru_nr);
    headrow[0].textContent = "";
    headrow[0].appendChild(link);
}

function timeHelper(){
    console.log("clicked");
}

我创建一个元素并尝试为其提供 onclick 属性。但是，如果我在 window.onload 中调用函数 createTimeLink() ，“单击”将记录在控制台中，但每次我再次单击该链接时都不会记录。我怎样才能做到如果我点击我的链接就会发生一些事情？将来我想在单击链接后打开一个模式，但目前单击链接时它甚至不会在控制台中显示“已单击”。

Answer 1

您正在将 link.onclick 设置为函数调用的RESULT。省略括号，它可能会起作用:

link.onclick = timeHelper;

在 JavaScript 中，函数是对象，因此您可以调用它们(通常对函数执行的操作就是括号的作用)，也可以传递它们(在这种情况下，您不需要编写括号! )。

所以这两者非常不同:

• someFunction();(运行函数，返回其结果)
• someFunction;(不运行该函数)

@w3re 正确地指出，addEventListener 可能是最简洁的方法。它不会改变此处的功能，但您稍后可能会遇到示例，您希望在其中拥有多个事件监听器。

如果您还没有使用过 addEventListener 及其对应的 removeEventListener，我强烈推荐它!