为何onclick无法调用指定的closeTvShowDetails函数？

在Webpack项目中，编写了动态生成弹窗的函数displayTvShowDetails，弹窗内的关闭按钮通过onclick属性调用同文件中的closeTvShowDetails函数，但控制台报错函数未定义。

相关代码如下：

弹窗生成函数 #

const displayTvShowDetails = (tvShow) => {
  const tvShowInfo = document.getElementById('tv-show-details');
  tvShowInfo.classList.add('popup-container');
  tvShowInfo.innerHTML = ` 
    <div class="tv-show-details-container">
...lots of tv-show info here that is irrelevant to this post
        <div>
          <button id="close-window" onclick="closeTvShowDetails()" >Close Window</button>
        </div>
      </div>
    </div>
  `;
};

关闭弹窗函数 #

const closeTvShowDetails = () => {
  const popup = document.getElementById('tv-show-details');
  popup.style.display = 'none';
};

控制台报错信息 #

closeTvShowDetails is not defined
ReferenceError: closeTvShowDetails is not defined
    at HTMLButtonElement.onclick

原因与解决方案 #

问题原因 #

Webpack会将每个模块的代码封装在独立的局部作用域中，而内联onclick属性中的代码是在全局作用域下执行的，因此无法访问模块局部作用域内的closeTvShowDetails函数。

解决方案 #

方案1：将函数挂载到全局对象

把closeTvShowDetails挂载到window对象上，让全局作用域可以访问：

window.closeTvShowDetails = () => {
  const popup = document.getElementById('tv-show-details');
  popup.style.display = 'none';
};

方案2：使用DOM事件监听（推荐）

去掉内联onclick，在生成弹窗HTML后，通过addEventListener绑定事件，这种方式更符合现代前端开发规范，也避免污染全局作用域：

const displayTvShowDetails = (tvShow) => {
  const tvShowInfo = document.getElementById('tv-show-details');
  tvShowInfo.classList.add('popup-container');
  tvShowInfo.innerHTML = ` 
    <div class="tv-show-details-container">
...lots of tv-show info here that is irrelevant to this post
        <div>
          <button id="close-window">Close Window</button>
        </div>
      </div>
    </div>
  `;
  // 绑定点击事件
  document.getElementById('close-window').addEventListener('click', closeTvShowDetails);
};

方案3：事件委托

如果弹窗的容器tv-show-details在页面初始化时就已存在，可以使用事件委托，只需要绑定一次事件，无需每次生成弹窗后重复绑定：

// 页面初始化时绑定事件委托
document.getElementById('tv-show-details').addEventListener('click', (e) => {
  if (e.target.id === 'close-window') {
    closeTvShowDetails();
  }
});

// 弹窗生成函数保持原有逻辑，无需额外处理事件
const displayTvShowDetails = (tvShow) => {
  const tvShowInfo = document.getElementById('tv-show-details');
  tvShowInfo.classList.add('popup-container');
  tvShowInfo.innerHTML = ` 
    <div class="tv-show-details-container">
...lots of tv-show info here that is irrelevant to this post
        <div>
          <button id="close-window">Close Window</button>
        </div>
      </div>
    </div>
  `;
};

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