为何window.onload实例化时会自动触发下拉列表的onChange事件监听器

• 页面加载阶段你在window.onload回调中对下拉框执行了赋值操作，当新赋值和下拉框初始默认值不一致时，会自动触发onchange事件
• 下拉框DOM未明确设置初始selected属性，浏览器完成页面渲染自动修正下拉框选中状态的操作会被识别为值变更，触发事件
• onchange事件绑定时机早于下拉框初始化完成时间，浏览器初始化下拉框的状态变更会被已绑定的事件监听器捕获

• 新增初始化状态锁，页面加载完成前拦截所有非用户触发的变更事件，示例代码如下：

// 初始化状态标识，默认未完成加载
let pageInitFinished = false;

window.onload = function() {
  // 执行所有下拉框初始化、赋值操作
  initSelectData();
  // 全部初始化完成后再解锁事件监听
  pageInitFinished = true;
}

// 下拉框change事件处理函数
function onSelectChange(e) {
  // 初始化未完成时直接返回，不执行校验逻辑
  if (!pageInitFinished) return;
  // 此处写入你的下拉框空值校验逻辑
  if (!e.target.value) {
    alert('请选择下拉选项');
  }
}

• 若初始化时需要手动给下拉框赋值，赋值前先临时解绑onchange事件，赋值完成后再重新绑定，避免多余触发
• 给下拉框第一个选项明确添加selected属性，保证DOM初始状态和渲染后状态一致，避免浏览器自动修正状态触发变更事件

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