Question

我正在尝试传递一个函数，该函数在特定按钮上有addEventListener方法的2个参数，但问题是当页面加载时直接执行函数而不是在某个人点击按钮时执行它。

我知道如何使用匿名函数，但我需要它来处理特定的定义函数。

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是中间调用，因为您正在向其传递参数（使用圆括号）。通常，您可以通过两种方式将函数传递给函数：

只有名称，例如passFunction(changeContent);
包装（匿名）函数，如上所示passFunction(function() { changeContent( ...);} );。匿名函数不会被中间调用，因为您没有将参数传递给它。

你可以解释一下这个点changeContent是中间名为

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

有没有办法让它工作而不用（匿名）函数
包装它

使用.bind功能。第一个参数是this的值。因此，这种情况需要3个参数：

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

有关详细信息，请参阅docs of .bind

将带有2个参数的函数传递给addEvent Listener方法

1 个答案: