在JavaScript函数代码块内创建事件监听器是否合理？

问题背景 #

我有一段实现Cookie同意弹窗的JavaScript代码：

原代码 #

if (!CookieManager.getCookie("consent")) {
  const modal = new Modal("#cookieConsentModal");

  // 打开Cookie同意弹窗（如果需要）
  modal.show();

  // 监听'允许'和'拒绝'按钮的点击事件
  $("#cookieConsentAllowButton").on("click", () => {
    CookieManager.consent = true;
  });

  $("#cookieConsentDeclineButton").on("click", () => {
    CookieManager.consent = false;
    CookieManager.deleteAllCookies();
  });
}

重构后的代码（使用IIFE） #

(() => {
  if (CookieManager.getCookie("consent")) return;

  const modal = new Modal("#cookieConsentModal");

  modal.show();

  $("#cookieConsentAllowButton").on("click", () => {
    CookieManager.consent = true;
  });

  $("#cookieConsentDeclineButton").on("click", () => {
    CookieManager.consent = false;
    CookieManager.deleteAllCookies();
  });
})();

请问在JavaScript函数代码块（这里的立即执行函数表达式（IIFE））内创建事件监听器的写法是否正确？

回答 #

这种写法完全正确，核心原因和优势如下：

• 事件监听器是绑定到DOM元素本身的，和定义它的函数作用域没有直接关联。只要绑定事件时目标DOM元素已经存在，后续即使定义监听器的函数执行完毕，监听器依然能正常响应触发。
• 使用IIFE可以有效隔离内部变量（比如modal）的作用域，避免不必要的全局变量污染，这是前端开发中很常用的代码封装手段。
• 重构后的代码逻辑和原代码完全等价：仅当用户未提交Cookie同意状态时，才会初始化弹窗并绑定按钮事件，代码结构更简洁，提前返回的写法也让逻辑更清晰。

需要注意的细节：确保绑定事件时，#cookieConsentAllowButton和#cookieConsentDeclineButton这两个DOM元素已经被加载到页面中（比如将脚本放在</body>标签前，或者监听DOMContentLoaded事件后再执行），否则事件绑定会失效——但这个问题和是否在IIFE内定义监听器无关，原代码也存在同样的风险。

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