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

标签 javascript dom-events

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,如果是这样,我将如何单独访问它们?

最佳答案

When is the "eventObj" created in this code?

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

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

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

更新:

回答您的评论:

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) {}),您的函数就会接受事件对象。

人们通常把那个参数命名为eevent的缩写,或者event,来表示这个参数是个什么样的东西,但是你可以随意命名,就像任何其他函数的任何其他参数一样。

关于javascript - 事件对象如何在此代码中工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35977016/

相关文章:

javascript - 使用 WYSIHTML5 编辑器显示工具栏时遇到问题?

javascript - dimple.js 中的 eventArgs 显得不完整

javascript - 是否可以触发事件然后将事件扩展到另一个元素?

javascript - 带有自己的事件监听器的工具提示

javascript - getElementByClass 它存在于 vanilla js 中吗?嗯?

javascript - getElementById(element).innerHTML 缓存?

javascript - 谷歌翻译中 div 的点击或鼠标弹起事件

javascript - 这个 JavaScript 示例有什么问题?

javascript - map 拖动事件 谷歌地图 android sdk cordova cordova-plugin-googlemaps

javascript - 如何确保文本框中的 whaveter 仅是二进制的 1's and 0' s?