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) {}
),您的函数就会接受事件对象。
人们通常把那个参数命名为e
,event
的缩写,或者event
,来表示这个参数是个什么样的东西,但是你可以随意命名,就像任何其他函数的任何其他参数一样。
关于javascript - 事件对象如何在此代码中工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35977016/