html dom添加javascript函数

Question

这两者之间有什么区别：

document.form1.colorButton.onclick = setBGColor;`

和

<input name="colorButton" type="button"
       value="Change background color"
       onclick="setBGColor();"/>`

将属性添加到属性时有（）但是在使用DOM时没有（）。这是为什么？

任何官方文档的参考资料都会有所帮助。

Answer 1

在.onclick版本中，您直接指定对.onclick属性的JS函数引用的引用。提供括号是错误的，因为这会导致函数被立即调用，并将其结果分配给事件处理程序。

在＆＃34;内联＆＃34; DOM0方法，结果代码更像是：

document.form1.colorButton.onclick = function onclick(event) {
    setBGColor();
}

实际上，如果您使用内联方法然后查看document.form1.colorButton.onclick的值，这正是您在Chrome控制台中看到的内容。

为了进一步解释，onclick属性的主体包含在一个新函数中，然后引用 分配给该属性。您必须提供括号，否则将不会调用setBGColor()函数。