Paramètres inexpliqués passés dans les fonctions JavaScript, quelque chose de fondamental me manque

Question

Je me suis formé à JavaScript au cours du dernier mois maintenant, mais pas de manière très régulière car mon travail est très dispersé. Lorsque j'ai du temps libre, mon travail consiste à travailler sur des extensions pour notre équipe de vente.

Pour l'instant, je n'ai pas de problème spécifique que je ne peux pas résoudre, mais j'ai une question qui me fait penser qu'il y a quelque chose de très différent à propos des fonctions en javascript qui me manque encore.

Regardez ce code, et je vous expliquerai ce qui me perturbe dans ce code :

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);
  }
});

Donc, dans ce code, je comprends ce qui se passe sauf la partie click(e). Le 'e' est un objet d'événement correct ? Je ne comprends pas comment il a été transmis et comment il sait que 'e' signifie cela. Je suppose que je pourrais remplacer le 'e' par 'foo' et que cela fonctionnerait toujours, mais ce qui se passe exactement n'est pas clair. Je suis presque sûr que cela a à voir avec cette ligne de code :

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

Mais je ne comprends pas ce qui se passe en coulisses pour que cela se passe comme ça.

Voici un autre exemple tiré du passage de messages à 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);
  });
});

L'origine de la "réponse" n'est pas claire pour moi, tout comme le "e" dans l'autre exemple. Toute aide pour démystifier ce fonctionnement serait appréciée, je suis ouvert à l'apprentissage, et je n'ai pas trouvé de bonne explication à ce sujet.

Answer 1

L'objet événement est transmis à la fonction par le navigateur lui-même.

Si un événement se produit et qu'un gestionnaire d'événement correspondant est attaché, le navigateur appelle ce gestionnaire d'événement et lui transmet un objet événement contenant des informations (plus ou moins) pertinentes sur l'événement.

Donc, en ce qui concerne votre premier exemple :

D'abord la fonction click( e ) est défini de manière régulière.

Ensuite, deux gestionnaires d'événements sont enregistrés :

1. pour l'événement DOMContentLoaded
2. pour un click sur plusieurs <div> éléments.

Pour le premier gestionnaire, une fonction anonyme est utilisée.

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

Ici, l'objet événement est omis car il n'est probablement pas nécessaire.

Dans le second cas, le <div> obtiennent tous le même gestionnaire d'événements, à savoir click(e) .

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

Ici, cependant, l'objet événement est capturé comme un paramètre par la fonction car il est nécessaire dans le corps de la fonction.

En général, en JavaScript, il n'est pas nécessaire de définir tous les paramètres, ni dans la déclaration de la fonction, ni dans l'appel d'une fonction. Il suffit de définir les paramètres nécessaires et ils sont appliqués dans l'ordre indiqué. C'est pourquoi dans la définition du premier gestionnaire d'événement, le paramètre pour l'objet événement peut être omis sans aucune erreur.

Answer 2

Le site click est invoquée par le navigateur en réponse à un événement de clic. Le navigateur transmet l'objet d'événement approprié comme premier argument.

Aussi, vous avez raison de dire que e peut être n'importe quoi. Vous pouvez donner au paramètre le nom (légal) que vous voulez.