window.onload = function() {
  document.getElementById('clickMe').onclick = runTheExample;
}

function runTheExample() {
  alert('running the example');
}

This is a simple event handler for the onclick event for an html input button with id = clickMe.

In line 2, why is the call to function runTheExample not immediately followed by ()? I thought that to call a function you must pass it any variables/objects it expects in an open/close parenthesis, and if the function isn't expecting anything, you must still include the open and close parenthesis like runTheExample().

window.onload = function() {
  document.getElementById('clickMe').onclick = runTheExample;
}

function runTheExample() {
  alert('running the example');
}

This is a simple event handler for the onclick event for an html input button with id = clickMe.

In line 2, why is the call to function runTheExample not immediately followed by ()? I thought that to call a function you must pass it any variables/objects it expects in an open/close parenthesis, and if the function isn't expecting anything, you must still include the open and close parenthesis like runTheExample().

• javascript
• syntax
• dom-events

• 1 It's very simple: That isn't a call to the function. – SLaks Commented Jan 10, 2013 at 3:23
• Think of () as a way to call a function. If you set the onclick to runTheExample(), it will call runTheExample() immediately and try to run the return of that function (undefined/true/whatever you set it at). – jeremy Commented Jan 10, 2013 at 3:24

7 Answers 7

document.getElementById('clickMe').onclick = runTheExample;

The intention here is not to call runTheExample() but to assign the reference to the function runTheExample to the onclick event.

Internally, when the onclick event is fired, Javascript is able to call the function runTheExample through the reference you provided on the code above.

Snippet

var myFunction = function() { return 42; };

// Assigning the reference
myObject.callback = myFunction;

myObject.callback(); // Has the same effect as calling myFunction();

// Assigning by calling the function
myObject.callback = myFunction();

myObject.callback;   // Returns 42
myObject.callback(); // Exception! Cannot call "42();"

That's not Javascript-specific. Passing functions by reference is available in many languages.

You use the parenthesis only to invoke (call) a function. When you're assigning it to onclick, you're merely passing it by reference.

To better understand this, think about the other method of declaring a function:

var runTheExample = function () {
  alert('running the example');
}

Regardless of what method you use, runTheExample will contain a reference to the function (there are some differences, like the function reference not being available before assignment, but that's a different story).

Functions are objects in javascript. That line sets the onclick property of the click me element to the runTheExample function, it doesn't call that function right then.

var a =runTheExample; //sets a to runTheExample
a(); //runs the runTheExample function

So when the function name is referenced without the () it is referring to the function object, when you add the () it is a call to the function, and the function executes.

It's not calling it, but rather setting the property onclick. When a call is made to onclick(), it will then run the function you've defined. Note however that the context of this will be the object that calls it (document.getElementById('clickMe')).

You're not calling the function here. You're setting the function as an event handler, and the function is not actually called called until the event is fired. What you've written references the function; that's a different notion than actually calling it.

In this case, the runTheExample function is being treated as a variable and being assigned to the onclick event handler. You use () after a function name to call a function. If you added them here, what would happen is that runTheExample() would be called once during load, showing an alert, and then a null value would be assigned to the onclick handler.

Because it binds runTheExample to onclick event.
When you add () it triggers the function.