Question

我已经在Google的Google Maps文档之一中看到了这种代码。我的问题是关于听众的。代替了在单击事件之后立即传递的回调函数，调用了showArrays()函数，但没有传递任何参数。另一方面，showArrays()函数使用事件作为参数。请向我解释这种调用函数。

element.addListener('click', showArrays);
  //some code here
}


 function showArrays(event) {
  // some code here
 }

Answer 1

将函数名称视为变量本身。 showArrays是一个变量，当给定事件时，该变量将执行某些操作。

您可以将函数名称作为参数传递给addListener，以便单击元素时它可以调用回调。重要的是要注意，您没有在第一行中调用该函数，而只是传递了对该函数的引用。

您可以通过以下测试在浏览器的控制台中显示此属性：

function test() { console.log("Test was called"); }

请注意，如果您说var x = test，则控制台上没有任何内容。但是，如果您说var x = test()，则会看到打印内容。最后，如果您执行var x = test; x()，则会看到打印输出，因为您在为测试函数分配了新名称后调用了它。

Answer 2

请注意，在element.addListener('click', showArrays)行中，showArrays后没有方括号。这意味着它没有被调用。而是将整个函数作为参数传递给addListener方法。

当使用addListener（或更常见的是addEventListener）将它们附加到JS中时，JS中的事件监听器将采用您提供的处理函数，并且，当事件发生时，它们将调用该函数并将事件对象传递给它。

换句话说，在单击元素之前，不会调用showArrays，并且所有事件侦听器在该点上都会固有地传递一个事件对象，详细说明了事件的特定属性。

Answer 3

用于描述函数的一种语法情况是：

var showArrays = function (event) {
  // of the code here
}

正是addEventListener方法使用的参数值，甚至其他函数（如setTimeout或setInterval等）也要使用。

Answer 4

addEventListener方法始终将“事件”对象作为参数发送给回调函数。使用匿名功能时，很明显可以看到它：

element.addEventListener('click', function(event) {
    // some code here
});

但是，当您向addEventListener方法发送事件发生时要调用的函数的链接时（在您的情况下，它是showArrays函数的链接），addEventListener会发送“ event”对象作为该函数的参数本身。因此，虽然看不到它，但是“事件”对象会自动发送到showArrays函数。

element.addEventListener('click', showArrays); // the event object will be sent automatically

您将可以访问showArrays函数中的“事件”对象。但是，言归正传，在showArrays函数声明中，您应该有一个用于捕获“事件”对象的参数。

function showArrays() {} // it's not going to work
function showArrays(event) {} // it will work