html dom adding javascript functions

Question

What is the difference between these two:

document.form1.colorButton.onclick = setBGColor;`

and

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

When adding it to the attribute there are () but when using the DOM no (). Why is this?

Any referencea to official documentation would help.

The first one is a function, the second is a string. The string is evaluated using eval() — blgt
– blgt, Commented Sep 25, 2014 at 13:26
@blgt: It doesn't use eval. The string becomes the body of a new function object. — user1106925
– user1106925, Commented Sep 25, 2014 at 13:30
try to type setBGColor in console, you will see it contains setBGColor(). — Andreas L.
– Andreas L., Commented Sep 25, 2014 at 13:30
@squint Fair point, but unless you're concerned with debugging or trying to leverage some usage of this it's equivalent. Just easier to think about in terms of strings. — blgt
– blgt, Commented Sep 25, 2014 at 13:34

Alnitak · Accepted Answer · 2014-09-25 13:45:38Z

2

In the .onclick version, you are directly assigning a reference to a JS function reference to the .onclick property. It would be an error to supply the parentheses because that would result in the function being called immediately and its result being assigned to the event handler.

In the "inline" DOM0 method, the resulting code is more like:

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

and in fact this is exactly what you'd see in a Chrome console if you used the inline method and then looked at the value of document.form1.colorButton.onclick.

To explain further, the body of the onclick attribute is wrapped up inside a new function and then the reference to that is assigned to the property. You must supply the parentheses otherwise the setBGColor() function would not be invoked.

edited Sep 25, 2014 at 13:45

answered Sep 25, 2014 at 13:27

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

html dom adding javascript functions

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related