通过JavaScript修改按钮onClick事件时函数立即执行的问题

嘿，我一眼就揪出你代码里的问题啦！

你当前的代码之所以会在修改事件时立刻跳转页面，核心原因是你给addEventListener传递的第二个参数不是一个待触发的函数，而是一个会立即执行的赋值表达式：

document.getElementById('Send').addEventListener("click", window.location.href = ' http://www.google.com ');

这段代码里的window.location.href = 'http://www.google.com'是一个赋值操作，JavaScript会优先执行它——也就是立刻把页面跳转到指定URL，然后把这个表达式的返回值（就是那个URL字符串）传给addEventListener。但字符串并不是函数，所以你的点击事件其实根本没绑定成功，还触发了意外的立即跳转。

正确的写法有这几种： #

• 用匿名函数包裹逻辑：把跳转代码放在匿名函数里，这样只有当按钮被点击时，函数才会执行：

document.getElementById('Send').disabled = false;
document.getElementById('Send').addEventListener("click", function() {
  window.location.href = 'http://www.google.com';
});

• 用箭头函数简化写法：如果你的环境支持ES6语法，箭头函数会更简洁：

document.getElementById('Send').disabled = false;
document.getElementById('Send').addEventListener("click", () => {
  window.location.href = 'http://www.google.com';
});

• 抽成独立的命名函数：如果这个跳转逻辑需要复用，把它写成单独的函数，传递函数名（注意不要加括号！加括号会立即执行）：

function redirectToTarget() {
  window.location.href = 'http://www.google.com';
}

document.getElementById('Send').disabled = false;
document.getElementById('Send').addEventListener("click", redirectToTarget);

关键知识点回顾： #

addEventListener的第二个参数必须是一个函数引用——可以是匿名函数、箭头函数，或者不带括号的命名函数名。只要你写的是会立即执行的表达式（比如赋值、带括号的函数调用），就会触发意外的立即执行行为。

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