Question

I have been teaching myself JavaScript over the last Month now, not super consistently since my work has been all over the place, when I get downtime my job is to work on extensions for our sales team.

Right now I don’t have a specific issue that i can’t solve, but I have a question that makes me think that there is something very different about functions in javascript that I am still missing.

Look at this code, and I will explain what confuses me about it:

function click(e) {
  var selection = e.target.id;
}

document.addEventListener('DOMContentLoaded', function () {
  var divs = document.querySelectorAll('div');
  for (var i = 0; i < divs.length; i++) {
    divs[i].addEventListener('click', click);
  }
});

So, in this code, I understand what is going on except how the click(e) part. The ‘e’ is an event object correct? It is not clear to me how that got passed, and how it knows that ‘e’ means that. I assume I could replace the e with “foo” and it would work still, but exactly what is happening is not clear.
I am pretty sure it has to do with this line of code:

divs[i].addEventListener('click', click);

But I don’t understand what is happening behind the scenes to make that happen the way it does.

Another example is this from the message passing at http://developer.chrome.com/extensions/messaging.html:

contentscript.js
================
chrome.extension.sendMessage({greeting: "hello"}, function(response) {
  console.log(response.farewell);
});


background.html
===============
chrome.tabs.getSelected(null, function(tab) {
  chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(response) {
    console.log(response.farewell);
  });
});

‘response’ in this is not clear to me where it is coming from, much like ‘e’ in the other example. Any help demystifying how this works would be appreciated, I am open to learning, and I haven’t found a good explanation about this.

Answer 1

The event object is passed through the function by the browser itself.

In case there is an event and a respective event handler is attached, the browser calls that event handler and passes an event object with some (more or less) relevant information about the event to the event handler.

So with respect to your first example:

First the function click( e ) is defined in a regular way.

Afterwards two event handlers are registered:

1. for the event DOMContentLoaded
2. for a click event on multiple <div> elements.

For the first handler an anonymous function is used.

document.addEventListener('DOMContentLoaded', function () {
  // do stuff here
});

Here the event object is omitted as it is probably not needed.

In the second case the <div> elements all get the same event handler, namely click(e).

divs[i].addEventListener('click', click);

Here, however, the event object is captured as a parameter by the function as it is needed inside the function body.

In general in JavaScript you don’t have to define all parameters either in the function declaration nor in the call of a function. You just define the parameters needed and they are applied in the order given. That’s why in the first event handler’s definition the parameter for the event object can be omitted without any errors.