javascript - HTML 按钮的 "onclick"属性在单击之前调用函数

Question

我正在尝试使用d3.select在DOM中创建一个带有onclick属性的按钮，这样当我单击该按钮时，就会调用一些函数。但是，在我单击按钮之前，该函数只是调用自身。这是我的 JS 代码:

var something = function() {
     console.log("do something");
}


d3.select("#done")
    .append("button")
    .text("Button Text")
    .attr("onclick", something);

这是我的 HTML(还有更多内容，但这是相关部分):

<div id="done"></div>

当我执行代码时，something 函数会立即被调用并打印到控制台。我该如何解决这个问题？

如果这看起来真的很天真，请提前道歉 - 我对此很陌生。

Answer 1

不要使用会立即调用该函数的 attr("onclick", Something)，而是使用 selection.on 设置事件监听器:

var something = function() {
  console.log("do something");
}

d3.select("body")
  .append("button")
  .text("Button Text")
  .on("click", something);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

为了让您理解为什么在代码中调用 something，即使它没有括号(如 something())，documentation selection.attr 解释说:

[...] if the value is a function, it is evaluated for each selected element.

话虽这么说，您正在评估该函数(因此，在控制台中记录一条消息)。另外，请记住，您的函数返回 undefined，因此您没有添加任何属性。