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

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);