javascript - html dom 添加 javascript 函数

Question

这两者有什么区别:

document.form1.colorButton.onclick = setBGColor;`

和

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

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

任何对官方文档的引用都会有所帮助。

Answer 1

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

在“内联”DOM0 方法中，生成的代码更像是:

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

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

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