事件对象在此代码中的工作原理

How does an event object work in this code

本文关键字：工作 代码 对象 事件      更新时间：2023-09-26
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;
};

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

在此代码中何时创建"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

另请查看这个问题的答案，这是类似的

更新：

要回答您的评论：

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

正确。

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

再次更正。

我注意到在您的其他帖子中，他们使用"e"代替"eventObj"

您可以在函数中随意命名它。只要你输入一些东西作为你的函数参数（例如function(e) {}），你的函数就会接受事件对象。

人们通常将该参数命名为e，event或event的缩写，以表明这个参数是什么样的东西，但你可以随心所欲地命名它，就像任何其他函数的任何其他参数一样。

相关文章：