Question

window.onload = unblurMonaLisa;

function unblurMonaLisa() {
  var images = document.getElementsByTagName("img");
  for (var i = 0; i < images.length; i++) {
    images[i].onclick = showAnswer;
  } 
};

function showAnswer(eventObj) {
  var image = eventObj.target;
  var name = image.id;
  name = name + ".jpg";
  image.src = name;
};

上述代码为单击所述图像时未模糊的图像切换模糊图像。代码工作得很好。我的问题是关于＆＃34; eventObj＆＃34;传递给showAnswer函数。什么时候是＆＃34; eventObj＆＃34;在这段代码中创建？是＆＃34; eventObj＆＃34;的范围？本地？如果我将onclick事件分配给两个不同的变量，则会创建两个＆＃34; eventObj＆＃34;如果是这样，我将如何单独访问它们？

Answer 1

此代码中何时创建“eventObj”？

当您感兴趣的事件发生时，在这种情况下为click，您的回调函数将由环境自动执行。执行回调函数时，会给它一个event object作为参数，您可以选择在函数签名中忽略它。（即您的showAnswer功能可能与此function showAnswer() {...}相同。 event object是一个常规对象，用于保存刚刚发生的事件的信息。

“eventObj”的范围是否是本地的？

是的，是的。

如果我将onclick事件分配给两个不同的变量

使用.onclick无法添加两个不同的回调函数。如果要为同一事件添加多个回调函数，则应使用addEventListener()。

会创建两个“eventObj”，如果是这样，我将如何单独访问它们？

为该事件创建的事件对象只是一个，它将被传递给所有回调函数。

有关活动的更多信息，请阅读： https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

另请查看this问题的答案，该问题类似

更新：

回答你的评论：

每次发生事件时，浏览器都会创建一个唯一的事件对象，无论我们是否有处理器监听该事件？

正确。

我们可以将这个唯一对象传递给我们的处理程序

再次纠正。

我注意到你在另一篇文章中用“e”代替“eventObj”

您可以在功能中将其命名为任意名称。只要您将某些内容作为函数参数（例如function(e) {}），您的函数就会接受该事件对象。

人们通常将该参数命名为e，简称event或event，以指明此参数的类型，但您可以根据需要为其命名，例如任何任何其他函数的其他参数。

事件对象如何工作？

1 个答案: