无法解释的参数传递给JavaScript函数，这是我所缺少的基本知识

Question

我过去一个月以来一直在自学JavaScript，但自从我的工作已经遍地开花之后，我的工作就变得非常不稳定。当我遇到停机时，我的工作就是为我们的销售团队进行扩展。

现在，我没有一个我无法解决的特定问题，但是我有一个问题让我认为，我仍然缺少关于javascript中的函数的一些不同之处。

看下面的代码，我将解释什么使我感到困惑：

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

因此，在这段代码中，我了解了发生了什么，除了click（e）部分如何。 “ e”是事件对象正确吗？ 我不清楚这是如何通过的，以及如何知道“ e”的含义。 我以为我可以将e替换为“ foo”，并且仍然可以使用，但是目前尚不清楚。 我很确定这与以下代码行有关：

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

但是我不了解幕后发生的事情以这种方式实现。

另一个示例是来自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);
  });
});

我不清楚其中的“响应”来自何处，就像另一个示例中的“ e”一样。 任何有助于揭开其神秘面纱的帮助将不胜感激，我乐于学习，并且我还没有找到很好的解释。

Answer 1

事件对象由浏览器本身通过函数传递。

如果存在事件并附加了相应的事件处理程序，则浏览器将调用该事件处理程序，并将带有一些（或更少）有关该事件的相关信息的事件对象传递给事件处理程序。

因此，关于您的第一个示例：

首先，以常规方式定义click( e )函数。

之后，将注册两个事件处理程序：

1. 对于事件DOMContentLoaded
2. 多个<div>元素上的click事件。

对于第一个处理程序，使用匿名函数。

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

这里事件对象被省略，因为可能不需要它。

在第二种情况下， <div>元素都获得相同的事件处理程序，即click(e) 。

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

但是，在这里，事件对象被函数捕获为参数，因为函数体内需要它。

通常，在JavaScript中，您不必在函数声明中或在函数调用中都定义所有参数。 您只需定义所需的参数，然后按给定的顺序应用它们。 这就是为什么在第一个事件处理程序的定义中可以省略事件对象的参数而不会出现任何错误的原因。

Answer 2

浏览器响应单击事件而调用click功能。 浏览器将适当的事件对象作为第一个参数传递。

此外，您是正确的， e可以是任何东西。 您可以为参数指定所需的任何（合法）名称。