JavaScript事件监听器中IIFE与普通函数作为回调的差异疑问

先把你提到的两个典型示例代码贴出来，方便对照：

示例1：IIFE作为事件回调的写法 #

const btn = document.querySelector('button');
btn.addEventListener('click', (function() {
  let count = 0;
  return function() {
    count++;
    if (count === 2) {
      alert('点击了两次');
      count = 0; // 重置计数
    }
  }
})());

示例2：普通函数作为事件回调的写法 #

const btn = document.querySelector('button');
btn.addEventListener('click', function() {
  let count = 0;
  count++;
  if (count === 2) {
    alert('点击了两次');
  }
});

为什么两个示例结果不同？ #

先看示例2的问题

每次点击按钮，这个普通回调函数都会被完整执行一遍：

1. 函数内部重新声明let count = 0，把count重置为0；
2. count加1变成1；
3. 判断1 === 2不成立，alert永远不会触发。
   说白了就是每次点击都重新初始化count，根本攒不到2。

再看示例1的逻辑

这里的IIFE是立即执行的——在你调用addEventListener的那一刻，这个带括号的函数就已经运行了：

1. IIFE内部声明了let count = 0，这个变量属于IIFE的作用域；
2. IIFE返回了一个匿名函数，这个函数会闭包住外部的count变量；
3. 真正绑定给按钮click事件的，是IIFE返回的这个匿名函数。

所以每次点击按钮时，执行的是这个返回的函数：

• 它不会重新声明count，而是直接对IIFE里的count进行累加；
• 第一次点击count变成1，第二次变成2，触发alert后重置为0，循环往复，所以每两次点击弹一次提示。

事件监听器中IIFE与普通函数作为回调的核心区别 #

• 普通函数回调：每次事件触发时，函数都会从头执行，内部变量每次都会重新初始化，无法在多次触发之间保留状态。
• IIFE作为回调（本质是返回函数）：IIFE在绑定事件时就已经执行完毕，它创建了一个独立的私有作用域，返回的函数通过闭包持有这个作用域里的变量，从而能在多次事件触发之间持续维护状态。

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