alert( "Hi!" ) 和 function(){alert( "Hi!" )} 之间的区别

Question

当我们在按钮中执行内联命令时：

<button id="myButton" onclick="alert('Hi!')"> 

为什么

document.getElementById("myButton").onclick = alert('Hi!') 

不起作用，但在加载页面时发出警报？我不明白它是如何与添加到其中function()和没有function()一起工作的.我希望你们理解我的问题。我在这里错过了一些东西。

Answer 1

document.getElementById("myButton").onclick = alert('Hi!')

是错误的，因为 OnClick 应该分配给函数引用，而不是函数调用结果本身。

它将在加载页面时执行alert('Hi!')，但这不是这里的意图，是吗？分配 onclick 处理程序的目的是确保在单击按钮时将执行此警报。

为此，它应该是：

document.getElementById("myButton").onclick = function(){alert('Hi!')};

此外，除非将其包装在 window.onload 事件中，否则这将不起作用：

window.onload = function(){
    document.getElementById("myButton").onclick = function(){alert('Hi!')};
};

Answer 2

alert('Hi!')是一个函数调用，它提醒"Hi"并且不返回任何内容（undefined）。

onclick期望得到一个函数，而你正在传递函数调用的结果，即undefined。

由于JavaScript不是一个强类型框架，因此您不会在错误的分配上出错。

那么为什么以下工作：

<button id = "myButton" onclick="alert('Hi!')">

这是因为 html 解析器（在本例中为浏览器）在幕后完成一些工作，并使用函数包装调用。

Answer 3

>document.getElementById("myButton").onclick希望稍后调用函数。

<button id = "myButton "onclick="alert('Hi!')">希望稍后执行代码块。

Answer 4

alert('Hi') 

这里 alert 是一个由浏览器调用的内置函数，它打开一个警报框。

function callAlert(){
  alert('Hi');
}

这里callAlert是一个自定义函数，它调用内置函数alert。

在您的示例中，在追加单击事件时，您必须定义函数

document.getElementById("myButton").onclick = alert('Hi!') //alert is 

已执行

document.getElementById("myButton").onclick = function (){ alert('Hi!') }; 
//a function is defined/declared which will be executed when the onclick action is performed

Answer 5

请参阅这篇文章，了解内联版本工作的原因。

简而言之，浏览器不仅将alert('Hi!')分配给onclick，还将其包装在函数中。