Javascript 将带有2个参数的函数传递给addEvent侦听器方法

我试图将一个有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

方法

---

也将其包装在匿名函数中

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

知道第二个版本不起作用的原因吗

因为

changeContent

是中间调用的，因为您正在向它传递参数（用圆括号）。通常，可以通过两种方式将函数传递给函数：

只有名称，例如

passFunction（changeContent）

包装在一个（匿名）函数中，如上所示

passFunction（function（）{changeContent（…）；}）。匿名函数不会被中间调用，因为您没有向它传递参数
你能解释一下这一点吗

如果您将参数传递给函数，它将被调用。如果将其包装在（匿名）函数中，而不向（匿名）函数传递参数，则不会调用（匿名）函数，因此也不会调用包装函数

有没有办法不使用（匿名）函数包装它就可以工作

使用
.bind
功能。第一个参数是this

的值。因此，在这种情况下需要3个参数：

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

---

有关更多信息，请参见

您能否解释这一点更改内容是中间调用的？我理解，如果函数名（functionName（argument1，argument2））是这样调用的，您不能将函数传递给另一个函数。是这样吗？如果没有圆括号，它应该是这样的

functionName（functionName）

的确如此。如果将参数（圆括号）传递给函数，则调用该函数。更新了答案。真的。因为我们没有将圆括号传递给（匿名）函数，所以（匿名）函数不会被中间调用