2

上个月我一直在自学 JavaScript，因为我的工作一直很忙，所以我一直在自学 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”的意思的。我假设我可以用“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”一样。任何帮助揭开它是如何工作的神秘面纱将不胜感激，我愿意学习，我还没有找到一个很好的解释。

4

2 回答 2

4

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

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

所以关于你的第一个例子：

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

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

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

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

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

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

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

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

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

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

于 2012-08-21T15:33:04.000 回答
0

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

另外，你是对的，e可以是任何东西。您可以为参数提供您想要的任何（合法）名称。

于 2012-08-21T15:33:33.930 回答