How functions get invoked in this code?

Explained in comments, line by line:

 <script> // this is a jQuery shorthand for $(document).ready. That means, that this function is executed automatically, when the DOM is ready $(function(){ // declaration of a function that will be executed when it's called from somewhere. 'id' is an argument that can be passed function f(id){ document.body.innerHTML += "<p>executing handler for div " + id + "</p>"; } // 'onclick' is an event handler. When you click the div container with the id 'div1', then the function, set after '=', gets executed document.getElementById("div1").onclick = function(){ // call the function that you declared above with the argument "1" f("1"); } document.getElementById("div2").onclick = function(){ f("2"); } document.getElementById("div3").onclick = function(){ f("3"); } }); </script> 

If I'm understanding you correctly based on your question of "why the function is on the right side of = operator?", your question really related to = function(){ in the following code.

document.getElementById("div1").onclick = function(){ f("1"); } 

What this code is doing is assigning an anonymous function to the onclick property of the div1 element.

When a user clicks on the div1 element, this anonymous function is executed. Within the anonymous function, a call is made to the function f passing the string "1".

The reason the anonymous function is needed is because if you were to exclude this and simply have this:

document.getElementById("div1").onclick = f("1"); 

Rather than calling the f function when the element is clicked, you would immediately call the f function and set the returned value (undefined) to the onclick property. By wrapping it in an anonymous function, you get the desired effect of calling f with the given parameter when the element is clicked.

According to what you have asked

$(function(){ }); 

gets executed on load of a page

if you want to call function f() you need to call as

$(function(){ f(); }); 

$(function(){...} is the jQuery function for document.ready. This function is executed as soon as all of the DOM is ready. It is a feature of jQuery. You don't call it explicitly - jQuery handles that for you.

The f() function is attached to the click handlers (onclick) that are defined for the three div elements. When they are clicked, they trigger the f() function.

The function is on the right side of an assignment because what the code is actually saying is replace the default onclick function with the one defined.