Question

Javascript大师，看看这段代码：

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

为什么onclick事件应该用（）onclick =“handler（）”分配给handler？在这种情况下，会调用警报。但是根据描述为类似问题的回答的逻辑https://stackoverflow.com/a/3247044/2543590 onclick分配给函数处理程序的结果，而不是自己运行。我相信指定onclick功能它应该是这样的

onclick="handler",

但在这种情况下不会调用警报。为什么？

Answer 1

内联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表达式的字符串，它与将函数对象绑定到事件不同。

Answer 2

因为onclick="handler"不是JavaScript。这是标签的一个属性。是的，如果这是JavaScript，你可以传递函数本身，但事实并非如此;您正在分配语句以便在点击时执行。

onclick="handler"执行的语句基本上是这样做的：

<script>
handler;
</script>

IE，没什么。

Answer 3

所有on - 元素的属性实际设置为内联Javascript，而不是处理程序。所以你实际上在那里执行代码，在这种情况下是一个函数调用。如果省略括号，则只是无效代码。

比较

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

Answer 4

你放在onclick=""中的任何东西都会被一个隐含的函数包裹起来。那是将在点击时调用的实际事件处理程序，其中的任何函数调用都需要括号。

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

4 个答案:

内联JS

将函数绑定到click事件

最佳实践

摘要