JS事件绑定中直接传函数调用与匿名函数包裹的区别及onclick替代方案

两种写法的核心区别 #

addEventListener方法的第二个参数要求传入函数引用，作为事件触发时的回调执行逻辑，两种写法的差异本质是传入的值类型不同：

• 第一种写法addEventListener("click", nextPrev(1))：代码执行到这一行时，会立刻调用nextPrev(1)，把函数的返回值（你的示例里这个函数没有return，返回值是undefined）传给事件监听，相当于没有给点击事件绑定任何有效回调，自然不会有点击触发的效果，这就是函数自动执行的原因。
• 第二种写法addEventListener("click", function(){nextPrev(1)})：传入的是匿名函数的引用，不会在代码初始化阶段执行，只有点击事件触发时，才会执行这个匿名函数内部的nextPrev(1)逻辑，符合预期。

其他等效实现方式 #

除了匿名函数包裹的写法，还有几种常用方案可以实现和行内onclick="nextPrev(1)"一致的效果：

• 使用Function.prototype.bind方法
  bind会返回一个绑定了this指向和入参的新函数引用，不会立即执行：

document.getElementById("nextBtn").addEventListener("click", nextPrev.bind(null, 1))

第一个参数是函数执行时的this指向，不需要修改的话可以传null，后续参数会作为预定义参数传给目标函数。

• 箭头函数（ES6+支持）
  语法比普通匿名函数更简洁，逻辑和匿名函数包裹完全一致：

document.getElementById("nextBtn").addEventListener("click", () => nextPrev(1))

• 直接赋值onclick属性
  和行内onclick逻辑完全一致，缺点是同一个元素的onclick只能绑定一个回调，新赋值会覆盖旧的绑定：

document.getElementById("nextBtn").onclick = () => nextPrev(1)

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