Passing a value to a function in JavaScript

Question

Say I have some HTML anchor elements and I would like to set a handler for each of them.

window.onload = function() {
 // I select all of the anchors
 var myAnchors = document.querySelectorAll("a");
 // I iterate through the anchors and set a handler to each of them
 for (var i = 0; i < myAnchors.length; i++) {
 myAnchors[i].onclick = handleControl;
 }
}
function handleControl(e) {
 var id = e.target.getAttribute("id");
}

I'm unable to understand how setting an handler passes an argument to the handleControl function. In other words, how does myAnchors[i].onclick = handleControl; pass a value e to the handler?

I got this code from a JavaScript programming book.

Answer 1

It doesn't. Basically you're saying what function should be used when, at some point in time, a value becomes available. So for example, there you're saying that when the link is clicked, the function you specified, handleControl, should be called. The parameter e is passed to it by the browser, which represents information about the click event.

So think of it like:

1. browser detects a click on the link
2. it creates an "event object" that contains information about the event
3. it invokes the handler function you specified with the "event object" as an argument. You can imagine it does something like anchor.onclick(event_info), where event_info corresponds to the e parameter you have on handleControl.

Keep in mind, this isn't necessarily exactly what's happening, but the point to answer your question is that the parameter comes from elsewhere (in this case, the browser), and is passed to an invocation of the function you specify.

• James Thorpe: Finally someone that read the actual question. Was just digging through the spec to see if I could find the point that actually specifies this behaviour, but not found it yet... Suspect it's buried in this bit somewhere...
• Andreas: @JamesThorpe Maybe this one? interface EventListener { void handleEvent(in Event evt); };
• James Thorpe: @Andreas I was more looking for the bit that defines the creation of the Event object itself before calling the handler, but I stopped looking a while ago :)

Answer 2

I believe you just want to know the how?

In layman terms:

1. hi, im an element, and you can click on me
2. Ok, when I click on you I want the function handleControl to be executed, here you got a reference to that function.
3. Thank you
4. User clicks
5. Oh boy! I'm clicked, let see if i got a function reference on my onclick attribute
6. Yes.. yes i do! Okay, let me fire this function and give some event information while doing this
7. Calling this.onclick(e); with e being an Event object, and this.onclick the reference to the handler function

If this is not what you asked for, i feel stupid and you can ignore this ;)

Answer 3

Your question is how setting an handler passes an argument to the handleControl function. In other words, how does myAnchors[i].onclick = handleControl; pass a value e to the handler?

So, onClick event will trigger one function:

function(e) {
 // Whatever you want to do with clicked 'anchor' e, do it here
}

Internally you will get the clicked anchor object as e here.

In your example the function

function handleControl(e) {
 var id = e.target.getAttribute("id");
}

does the same.

Answer 4

So when you do

 myAnchors[i].onclick = handleControl;

You are actually registering a callback function to myAnchors[i] element's click event.
The dom engine of the browser keeps track of all the callbacks for each event for each dom element. Now when an event occurs for element, then dom engine calls all the callbacks corresponding to the element and that event. But it calls with a parameter which is event object.

Answer 5

Here the function handleControl is subscribed to the DOM Element.
So if any click event triggers from DOM, the Event Info e will get passed to the subscribed method.