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

所以，在这段代码中，我了解除了点击（e）部分之外发生了什么。 'e'是一个正确的事件对象？我不清楚它是如何通过的，以及它如何知道“e”意味着什么。我假设我可以用“foo”替换e并且它仍然可以正常工作，但究竟发生了什么并不清楚。我很确定它与这行代码有关：

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 )以常规方式定义。

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

用于活动DOMContentLoaded
针对多个click元素的<div>事件。

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

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

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

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

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

但是，在函数体内需要函数捕获事件对象作为参数。

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

Answer 2

浏览器调用click函数以响应click事件。浏览器将相应的事件对象作为第一个参数传递。

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

传递给JavaScript函数的原因不明的参数，这是我缺少的基础

2 个答案: