以2个参数传递函数的addEvent监听方法

Question

我试图通过其中有2个参数对特定按钮的addEventListener方法的功能，但问题是直接执行时，页面加载，而不是执行它，当有人点击该按钮功能。

我知道如何使之与匿名函数的工作，但我需要它与特定定义的函数，而不是工作。

function changeContent(elem,str){ 
    elem.textContent = str; 
} 

var btn = document.querySelector("button"); 

var p = document.querySelector("p"); 

var content = "Someone Clicked the Button!"; 

// add event listener on click to the button 

// version 1 with anonymous function worked as expected 

btn.addEventListener("click",function(){ 
    p.textContent = content; 
}); 

// version 2 with specific defined function not working as expected 

btn.addEventListener("click",changeContent(p,content)); 

任何想法为什么第二个版本不工作，以及如何使其按预期工作的原因。

更新：

我的预期和重要的问题：

有没有什么办法让changeContent(p,content)功能工作 没有addEventListener 方法用（匿名）功能包吗？

Answer 1

也把它包在一个匿名函数

btn.addEventListener("click",function() { 
    changeContent(p, content) 
}); 

的原因，任何想法，为什么第二个版本是不工作

因为changeContent被称为中间因为你传递参数（带括号）。一般而言，您可以通过两种方式将函数传递给函数：

1. 只有名称passFunction(changeContent);
2. 裹在一个（匿名）功能，如上图passFunction(function() { changeContent(...);});。匿名函数不是中间调用的，因为你没有传递参数给它。

你能解释这一点changeContent是中间叫

如果你传递参数的函数，这就是所谓的。如果你把它包装在（匿名）功能，无需传递参数给（匿名）功能，（匿名）函数不叫，因此也不会被包装的函数。

有没有什么办法让它不工作了（匿名）函数

使用.bind功能包裹。第一个参数是this的值。所以，你需要为这个情况下3个参数：

btn.addEventListener("click",changeContent.bind(this, p, content)); 

欲了解更多信息，请参阅docs of .bind