Question

我读过一本书，在为元素的onclick属性分配函数时，我们不必使用括号。

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

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

Answer 1

由于内联事件（即指定为HTML属性）如何工作。

出于多种原因，通常这是一个坏主意（请参阅许多相关文章），但是您问题的答案是这样。

将事件指定为HTML属性，并将其指定为字符串。本质上，单击元素时，指定为属性值的字符串是 evaluated （这应该为您提供一个提示，使它们成为一个坏主意的线索）。因此，您可以考虑导致以下JS运行的事件：

sayHello(); //<-- invoke callback

如果它导致以下代码运行，则不会发生任何事情：

sayHello; //returns reference to callback to nowhere

Answer 2

如果您编写的var b1.onclick=sayHello();将立即调用sayHello函数，而不是等待click事件。如果您的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>

只要单击b1按钮，就会运行console.log。

对于HTML属性，它们是字符串。您可以考虑在HTML属性中分配onClick与该JavaScript大致等效：

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

为什么在元素的onClick标记内使用括号来调用函数，而在元素的onclick属性中却不使用括号？

2 个答案: