警报("嗨!")和功能()之间的区别{alert("嗨!")}

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是一个自定义函数,它调用内置函数警报

在您的示例中,当附加单击事件时,您必须定义该函数

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它而是将它包装在一个函数中.