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（不止于此，但这是相关的部分）：

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


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

当我执行代码时，将立即调用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()），该文件为selection.attr解释说：

[...]如果该值是一个函数，则会为每个选定的元素进行评估。

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