無法解釋的參數傳遞給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可以是任何東西。 您可以為參數指定所需的任何（合法）名稱。