addEventListener绑定click事件页面加载即触发，点击无效求助

核心问题 #

你传给addEventListener的是typeNumber(7)——这会立即执行该函数，并把它的返回值（这里是undefined）绑定为点击事件的回调。所以页面加载时函数就跑了，点击时自然没反应，因为绑定的根本不是一个可执行的函数。

解决方法 #

给你三种可行的写法：

1. 匿名函数包裹

用匿名函数把你的函数调用包起来，这样传给事件监听的是一个函数引用，点击时才会执行内部的typeNumber(7)：

const seven = document.getElementById("seven");
seven.addEventListener("click", function() {
  typeNumber(7);
});
function typeNumber(a){
  calculations.innerText = calculations.innerText + a;
}

2. 箭头函数（更简洁）

ES6的箭头函数可以简化写法，效果和上面一致：

const seven = document.getElementById("seven");
seven.addEventListener("click", () => typeNumber(7));
function typeNumber(a){
  calculations.innerText = calculations.innerText + a;
}

3. 让typeNumber返回一个函数（闭包方式）

调整typeNumber，让它返回一个能访问参数a的函数，这样直接传typeNumber(7)就会返回一个可作为回调的函数：

const seven = document.getElementById("seven");
seven.addEventListener("click", typeNumber(7));
function typeNumber(a){
  return function() {
    calculations.innerText = calculations.innerText + a;
  }
}

关键知识点 #

addEventListener的第二个参数必须是函数引用（即只写函数名，不带括号）。一旦你加了括号，JavaScript就会立刻执行这个函数，把执行结果当作回调——而如果函数没有明确返回值，结果就是undefined，自然无法响应点击事件。

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