事件对象如何在此代码中工作

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

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

Answer 1

When is the "eventObj" created in this code?

当您感兴趣的事件发生时，在本例中为 click，您的回调函数将由环境自动执行。当执行回调函数时，它会被赋予一个 event object 作为参数，您可以在函数签名中选择忽略它。（即你的 showAnswer 函数可能像这样 function showAnswer() {...}）。 event object 是一个常规对象，包含有关刚刚发生的事件的信息。

Is the scope of "eventObj" local?

是的，是的。

If I assigned the onclick event to two different variables

您不能使用 .onclick 添加两个不同的回调函数。如果你想为同一个事件添加多个回调函数，你应该使用 addEventListener()。

would that create two "eventObj" and if so how would I access them individually?

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

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

另请查看问题的答案，该问题与

相似

更新：

回复您的评论：

the browser creates a unique Event Object every time an event occurs whether we have a handler listening for that event or not?

正确。

We can pass this unique object to our handler

再次更正。

I noticed on your other post they used "e" in place of "eventObj"

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

人们通常把那个参数命名为e，简称event，或者event，来表示这个参数是个什么样的东西，但是你可以随意命名，与任何其他函数的任何其他参数一样。

事件对象如何在此代码中工作

How does an event object work in this code

javascript

dom-events