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也解释了：]]

[...]如果值是一个函数，则将为每个选定的元素求值。

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