为什么在传递参数时必须在addeventlistener中有一个匿名函数？

Question

因此，如果您有一个带有参数的命名函数并调用该函数，那么在使用addEventListener时它不能正常工作，但是如果您将它包装在一个匿名函数中，那么它会工作，为什么呢？

<input type="button" value="click me" id="subBtn" /> <br />
<div id="myDiv">default text</div>

这是我的JavaScript。

function myFunc(str){
   document.getElementById("myDiv").innerHTML = str;
}

//does not work.
document.getElementById("subBtn").addEventListener("click", myFunc("hey there buddy"), false);

//this works, but why?
document.getElementById("subBtn").addEventListener("click", function(){
   myFunc("hey there buddy");
}, false);

现在，如果myFunc没有任何参数，那么这两种方法都可以工作。

Answer 1

这样做的原因是：

function(){
   //code here
  }

这是一个函数声明，在发生单击事件之前不会被触发。这也是一样的：

var foo = function(){
  //code here
};

element.addEventListener('click', foo, false);

但是，现在您遇到了没有参数的问题，因为只有在实际触发函数时才会粘贴参数。该操作隐藏在addEventListener中，无法直接到达。

尽管如此，使用.bind有一个简单的解决方法

element.addEventListener('click', myFunc.bind(null, 'Hey there buddy'), false);

bind所做的是创建一个具有绑定作用域(第一个参数，可能非常有用)和参数(后面的每个参数)的函数。

这实际上是将绑定参数传递给指定的函数，而不使用匿名包装器。

Answer 2

您必须将一个函数作为参数传递给addEventListener。

但是，它不必是匿名的：

element.addEventListener("click", function IAmNotAnonymous(){
   myFunc("hey there buddy");
});

您可以使用函数调用，而不需要函数表达式包装器。但是，该调用中返回的值必须是一个函数：

function myFunc2(arg) {
    return someFunction; // <-- This must be a function
}
element.addEventListener("click", myFunc2("hey there buddy"));

当您使用addEventListener("click", myFunc("hey there buddy"))时，由于您的myFunc不返回函数，所以它无法工作。相反，

• 您正在调用myFunc，而无需等待事件的发生
• 将返回的值(undefined)作为参数传递给addEventListener

请注意，这个问题不是因为有参数，而是因为调用函数。使用addEventListener("click", myFunc())也是一样的。

您可能对bind感兴趣，而不是使用函数表达式包装器。

element.addEventListener("click", myFunc.bind(void 0, "hey there buddy"));