Javascript 为什么圆括号用于调用元素的onClick标记中的函数，而不用于元素的onClick属性中？

我在一本书中读到，在将函数赋给元素的onclick属性时，我们不必使用括号

<input type="button" value="Click" onClick="sayHello();" id="button1">
var b1=document.getElementById("button1");
b1.onclick=sayHello;

var b1=document.getElementById（“button1”）；
b1.onclick=sayHello；

---

为什么在上述元素的onClick属性中使用括号？

因为内联事件（即指定为HTML属性）是如何工作的

由于种种原因，它们通常是一个坏主意（参见许多相关帖子），但你的问题的答案是这样的

指定为HTML属性的事件以及指定为字符串的事件。本质上，当单击元素时，将对指定为属性值的字符串进行求值（这将为您提供一条线索，说明它们不是好主意的原因之一）。因此，您可以考虑导致以下JS运行的事件：

sayHello(); //<-- invoke callback

---

如果您编写了var b1.onclick=sayHello（）将立即调用

sayHello

函数，而不是等待

单击

事件。如果

sayHello

函数返回要分配给变量的某个值，则您可能希望使用此技术，但在分配

onclick

属性时，这几乎不适用（在示例中使用

var

关键字可能没有意义）

从技术上讲，您可以从

b1.onclick=sayHello（）获得所需的结果如果您的代码如下所示：

<button id="b1">invoke sayHello</button>

<script>
    var b1 = document.getElementById("b1");

    function sayHello() {
        return () => { console.log("hello"); };
    }

    b1.onclick=sayHello();
</script>

谢谢，这意味着onClick属性和onlick属性不一样。属性与属性是一个有趣的话题。有时他们步调一致；有时它们彼此分离。关键是不要使用内联事件；这是个坏习惯。
<button id="b1">invoke sayHello</button>

<script>
    var b1 = document.getElementById("b1");

    function sayHello() {
        return () => { console.log("hello"); };
    }

    b1.onclick=sayHello();
</script>

b1.onclick = eval("sayHello()");