Question

“ Head First JavaScript”一书中有一个示例。这段代码使单击时的图像不模糊。该代码有效，但是我不明白它是怎么回事，尽管它是一段非常简单的代码。

加载窗口时调用函数init。 getElementsByTagName给出一个HTMLCollection。单击图像会调用showAnswer函数。现在对我来说是个谜。

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

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

应该有一个参数e。如何从何处创建此参数？在showAnswer中调用init时，没有给它任何参数。
考虑到我正在使用.target方法这一事实，它应该是一个对象。浏览器如何知道该对象的名称为e？
为什么用images[i].onclick = showAnswer;而不是showAnswer();？

Answer 1

images[i].onclick = showAnswer定义了单击图像[i]时要运行的事件处理函数。如果要在此处使用showAnswer（），它将在init函数中立即运行，而这可能并不是您想要的。

images[i].addEventListener('click', showAnswer)是另一种书写方式，可能更直观。

事件处理程序函数传入一个事件对象，即“ e”所指的对象。 “ e.target”是指元素本身。

DOM事件的参考： https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events

Answer 2

（摆脱了在评论中回答问题的习惯...）

应该有一个参数e。如何从何处创建此参数？

当您执行images[i].onclick = showAnswer时，这将为images[i]中命名的DOM元素的“ click”事件分配“ showAnswer”作为事件处理程序。

稍后，当用户单击该元素（或事件由其他方法触发）时，浏览器将构造Event object，其中包含有关该特定事件的大量信息。然后它将调用事件处理程序，并将Event对象作为第一个（也是唯一一个）参数传递。

在初始化中调用showAnswer时，没有给它提供任何参数。

在您的init函数中，您不调用showAnswer；您可以将其分配为点击图片的事件处理程序。事件是将参数传递给处理程序而不是您的init的原因。

考虑到我正在使用.target方法这一事实，它应该是一个对象。浏览器如何知道该对象的名称为e？

这是您在函数中为参数指定的名称。您可以使用任何名称，但是e或evt是事件对象的常用约定。

为什么用images[i].onclick = showAnswer;而不是showAnswer();？

如果它是showAnswer()，则应将函数的返回值分配给点击处理程序。（在这种情况下，这是不确定的，因为showAnswer不返回任何内容。）使用showAnswer将函数本身分配给处理程序。

无法理解函数的参数如何在特定代码段中工作

2 个答案: