具有匿名功能的事件监听器

Question

它写在MDN

上

  

如果要将参数传递给侦听器函数，可以使用匿名函数。

经过一些实验后，当我尝试使用像这样的单参数函数（没有匿名函数）注册事件监听器时，我想出了

target.addEventListener(type, doSomething(parameter));

即使事件没有发生，侦听器函数也会执行，但是当我将它包装在匿名函数中时

target.addEventListener(type, function () {doSomething(parameter);});

一切都按预期进行。

为什么会发生这种行为？我想它与闭包有某种联系。

Answer 1

定义处理程序函数时如此

target.addEventListener(type, doSomething(parameter));

您将函数的返回值作为处理程序传递。例如，考虑这个函数：

function doSomething(event) {
    return 'foo';
}

现在，函数在事件发生之前立即执行，你基本上只是将它作为处理程序传递：

target.addEventListener(type, 'foo');

那无能为力。

第二个例子

target.addEventListener(type, function () {doSomething(parameter);});

正确地传递一个函数作为引用，而不是在事件发生之前执行它。

Answer 2

当您编写“ doSomething（parameter）”时，实际上是在调用该函数，然后该函数的返回值就是结果，并将该结果传递给addEventListener。执行“ doSomething（parameter）”，它不是您真正想要的函数指针（尽管javascript没有可见的函数指针）。

如果您编写了target.addEventListener（type，doSomething）;实际上会像您想要的那样将函数作为参数传递。但是，它不会像您想要的那样将参数传递给该函数调用。这就是为什么您需要像以前那样包装它的原因。如果您想要这样的事情，您可以这样做：

function doSomethingWrapper() {
    doSomething(parameter);
}

target.addEventListener(type, doSomethingWrapper);