javascript - 无法理解函数的参数在特定代码段中的工作方式

This question already has answers here:

What exactly is the parameter e (event) and why pass it to JavaScript functions?
                                
                                    （5个答案）
                                
                        
                去年关闭。
            
        

“ 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();？

最佳答案

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


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


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

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


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


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


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


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


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


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

关于javascript - 无法理解函数的参数在特定代码段中的工作方式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54557301/