如何在Vite中为下拉菜单使用onchange事件？

因为Vite的模块打包机制会把函数封装在模块局部作用域，不会自动挂载到全局window对象，所以内联onchange="doAllSarf()"这种写法找不到对应的函数，推荐用以下两种方式处理：

1. 使用原生DOM事件监听（推荐） #

直接在TypeScript代码中获取下拉元素，通过addEventListener绑定change事件，无需依赖全局作用域，更符合模块化规范：

// 假设你的TS文件中定义了doAllSarf函数
function doAllSarf() {
  // 原函数逻辑
}

// 获取下拉菜单元素，类型断言确保TS类型正确
const aynSelect = document.getElementById('ayn') as HTMLSelectElement;

// 绑定change事件
aynSelect.addEventListener('change', () => {
  doAllSarf();
});

注意：要确保这段代码在DOM加载完成后执行，比如放在DOMContentLoaded事件回调里，或者给TS脚本添加defer属性。

2. 临时方案：将函数挂载到全局window（不推荐） #

如果暂时不想修改太多代码，可以手动把函数挂载到window对象，让内联事件能访问到：

function doAllSarf() {
  // 原函数逻辑
}

// 挂载到全局window，类型断言避免TS报错
(window as any).doAllSarf = doAllSarf;

这种方式会污染全局作用域，不利于长期维护，仅适合临时过渡使用。

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