JavaScript中onclick绑定带参/无参函数的执行异常问题咨询

这是个新手常踩的坑！咱们来掰扯明白：

当你写 hash_btn.onclick = test_f 时，你是把函数本身赋值给了点击事件——浏览器会记住：“等按钮被点击时，再调用这个函数”。

但换成 hash_btn.onclick = test_f('whatever') 就不一样了：你这行代码是立刻执行了test_f('whatever')，然后把这个函数执行后的返回值（你的函数没写return，所以是undefined）赋值给了onclick事件。结果就是页面一加载函数就跑起来，点击按钮时反而因为触发的是undefined，啥反应都没有。

给你三种实用方案，按需挑：

1. 匿名函数包裹（最直观） #

把带参数的函数调用放进一个匿名函数里，这样只有点击按钮时才会触发匿名函数，进而调用你的目标函数：

hash_btn.onclick = function() {
  test_f('whatever');
};

2. 使用bind()方法 #

bind()会生成一个新的绑定函数，它会预先把你指定的参数传给原函数，只有事件触发时才会执行：

hash_btn.onclick = test_f.bind(null, 'whatever');

这里第一个参数null是用来指定this指向的，如果你不需要在test_f里用this，传null或者window都可以。

3. ES6箭头函数（简洁版） #

如果你的项目支持ES6+，箭头函数能让代码更清爽，效果和匿名函数完全一致：

hash_btn.onclick = () => test_f('whatever');

<input type="text" id="txt_hash" />
<input type="button" id="btn_hash" value="Hash"/>

<script>
var hash_btn = document.getElementById("btn_hash");
var hash_txt = document.getElementById("txt_hash");

var test_f = function(txt) {
  alert(`hello ${txt}`); // 这里可以把参数用上，直观看到传参效果
}

// 用箭头函数的方式绑定带参数的调用
hash_btn.onclick = () => test_f('whatever');
</script>

内容的提问来源于stack exchange，提问作者Lukáš Ježek