Can't understand how function's parameter work in a particular piece of code

Question

There is an example in "Head first JavaScript" book. This piece of code is unblurring an image on click. The code works, but I don't understand how, though it's an extremely simple piece of code.

The function init is called when a window is loaded. getElementsByTagName gives an HTMLCollection. A click on an image invokes a showAnswer function. Now there is a mystery for me.

window.onload = init;
function init() {
    var images = document.getElementsByTagName("img");
    for (var i = 0; i < images.length; i++) {
        images[i].onclick = showAnswer;
    }
};

function showAnswer(e) {
    var image = e.target;
    var name = image.id;
    name = name + ".jpg";
    image.src = name;
}

1. There should be a parameter e. How this parameter is being created, from where? When showAnswer is called in init, there are no parameters given to it.
2. Considering the fact that I'm using a .target method on it, it should be an object. How does the browser know that this object has name e?
3. Why images[i].onclick = showAnswer; and not showAnswer();?

Answer 1

images[i].onclick = showAnswer is defining the event handler function to be run when images[i] is clicked. If you were to use showAnswer() there, it would run immediately in the init function which is probably not what you want.

images[i].addEventListener('click', showAnswer) is another way to write that, which might be more intuitive.

Event handler functions pass in an event object, which is what the 'e' is referring to. 'e.target' is referring to the element itself.

A reference for DOM events: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events

Answer 2

(breaking myself of the habit of answering questions in comments...)

There should be a parameter e. How this parameter is being created, from where?

When you do images[i].onclick = showAnswer, that assigns "showAnswer" as the event handler for the "click" event for the DOM element named in images[i].

Later, when the user clicks that element (or the event gets triggered by some other method), the browser constructs the Event object, which contains a whole lot of information about that specific event. It then calls your event handler, passing along the Event object as the first (and only) parameter.

When showAnswer is called in init, there are no parameters given to it.

In your init function, you don't call showAnswer; you assign it as the event handler for clicks on images. The event is what passes the parameter to the handler, not your init.

Considering the fact that I'm using a .target method on it, it should be an object. How does the browser know that this object has name e?

That's the name you gave the parameter in the function. You could use any name, but e or evt are a common convention for event objects.

Why images[i].onclick = showAnswer; and not showAnswer();?

If it were showAnswer() you'd be assigning the return value of the function to the click handler. (Which in this case would be undefined, because showAnswer doesn't return anything.) With showAnswer you assign the function itself to the handler.