为什么在Javascript事件处理函数中使用括号？

Javascript大师，看看下面的代码：

<button onclick="handler()">ClickMe</button>
        <script>
            function handler() {
            alert("clicked");
        }
     </script>

但在这种情况下，不会调用警报。

---

为什么?

All

on

-元素上的属性实际上设置了内联Javascript，而不是处理程序。实际上，您正在那里执行代码，在本例中是一个函数调用。如果省略括号，这只是无效代码

比较：

<button onclick="alert('click!')">Click me!</button>

点击我！

Inline JS 当您执行这样的内联onclick处理程序时，您将分配一个Javascript表达式来运行。所以你需要执行这个函数

表达式也可以是

onclick=“handler（）；alert（2）”

，在这种情况下，显然需要调用函数，就像从javascript文件运行函数一样

将函数绑定到click事件 如果使用javascript附加click事件，则将绑定一个函数，因此只需传递函数对象

var btn = document.getElementById("btn");
btn.addEventListener("click",handler);

addEventListener

设置要绑定到事件的函数对象，以便在触发事件时执行。由于指定的是函数对象，而不是字符串表达式，因此不需要括号。事实上，如果添加它们，函数将立即执行，函数的返回值将绑定到事件

最佳做法 一般来说，大多数人都主张通过绑定函数处理程序而不是使用内联JS来绑定javascript中的事件。它更容易调试，不会将逻辑紧密绑定到DOM，并且对于动态页面更灵活。它还强制您创建任何您称为全局的函数

总结 关键是属性指向作为JS表达式计算的字符串，这与将函数对象绑定到事件不同

因为

onclick=“handler”

不是JavaScript。这是你标签的一个属性。是的，如果这是JavaScript，您可以传入函数本身，但它不是；您正在分配一条要在单击时执行的语句

onclick=“handler”

执行的语句基本上执行以下操作：

<script>
handler;
</script>

处理者；

---

也就是说，什么都没有。

您在

onclick=”“

中放入的任何内容都将使用隐式函数包装。这是单击时将调用的实际事件处理程序，其中的任何函数调用都需要括号。

JavaScript专家会告诉您不要在标记中绑定内联事件处理程序。使用内联处理程序有用的一个示例是，您需要确保元素可用之间没有延迟，以及功能齐全的元件。这种情况并不经常发生，但内联处理程序很好地解决了这个问题。Gurus会告诉你使用正确的工具来完成这项工作。“Gurus”会告诉你理解不同设计决策的后果，然后根据一些“最佳”标准选择一个最适合某个环境的。再给他一个例子让它更清楚，比如

onclick=“var t=1；alert（t）；t++；alert（t）；”

我只想挑剔一点点。只有一个函数调用并不能真正将逻辑绑定到DOM，就像在元素上有一个类在加载DOM后绑定处理程序一样。我同意，对于最常见的情况，内联处理程序不是最好的方法，但有时它们非常有用。@BlueSkies肯定有用。如果您有一个类，则可以在不更改DOM的情况下更改功能。如果有内联函数，则在不更改DOM的情况下无法更改表达式。如果更改DOM，则可能需要更改DOM选择，该选择为处理程序分配选择元素。这两种方法都不是完全纯洁的。

<script>
handler;
</script>