JavaScript addEventListener函数异常：页面刷新即执行，点击无响应

问题根源 #

你当前的代码中，addEventListener的第二个参数写的是alert("Your time has started")——这是一个立即执行的函数调用，页面刷新时就会直接触发alert，而不是把alert作为点击事件的处理函数绑定给按钮。所以后续点击按钮时，没有可执行的处理函数，自然不会触发。

修复方案 #

方案1：用匿名函数包裹alert #

把alert放在匿名函数里，这样传递给addEventListener的是一个函数引用，只有点击按钮时才会执行这个函数：

var btn = document.getElementById("star");
btn.addEventListener("click", function() {
  alert("Your time has started");
});

方案2：使用箭头函数（ES6语法） #

更简洁的写法，同样是传递函数引用：

const btn = document.getElementById("star");
btn.addEventListener("click", () => alert("Your time has started"));

方案3：修复onclick写法 #

如果要用onclick，同样不能直接赋值函数调用，要赋值函数：

var btn = document.getElementById("star");
btn.onclick = function() {
  alert("Your time has started");
};

额外注意事项 #

确保你的脚本在DOM元素加载完成后执行，比如把脚本标签放在</body>标签的末尾，或者用DOMContentLoaded事件包裹代码，避免出现找不到按钮元素的情况：

document.addEventListener("DOMContentLoaded", function() {
  var btn = document.getElementById("star");
  btn.addEventListener("click", function() {
    alert("Your time has started");
  });
});

内容的提问来源于stack exchange，提问作者Muhammad Umer Abbas