如何正确向addEventListener事件监听器传入回调函数？

核心差异原理 #

addEventListener方法的第二个参数要求传入待触发的函数引用，而不是函数执行后的返回值，两种写法的区别就在于你给第二个参数传的内容完全不同：

第一种写法错误原因 #

function handleClick(){
   alert("hi!");
}
document.querySelector("button").addEventListener("click",handleClick());

这里你写的handleClick()带了括号，代码运行到这一行时会立即执行handleClick函数，所以页面加载时就会弹出alert，之后会把该函数的返回值（你的代码里没有return语句，默认返回undefined）作为参数传给addEventListener，相当于没有给点击事件绑定任何可执行的函数，自然点击按钮时没有反应。

第二种写法正确原因 #

document.querySelector("button").addEventListener("click",function(){
    alert("hello");
});

这里你传入的是没有加执行括号的匿名函数本身（也就是函数引用），浏览器会将这个函数存储下来，只有当按钮点击事件触发时，才会调用执行这个函数，所以功能可以正常运行。

第一种写法的修复方案 #

如果要让第一种写法正常工作，只需要去掉handleClick后面的括号即可，直接传入函数名本身作为引用：

document.querySelector("button").addEventListener("click",handleClick);

这种写法和第二种匿名函数的运行逻辑完全一致。

内容的提问来源于stack exchange，提问作者David1