本文详解在动态销毁含 `` 的容器时，如何可靠捕获未提交的值变更——通过主动调用 `blur()` 触发 change 事件，解决 firefox 与 chromium 行为不一致问题，并给出健壮的 dom 清理实践。

在 Web 开发中， 的 change 事件通常在元素失去焦点（blur）且值发生实际更改后触发。但当输入框被非焦点方式移除（如父容器被 innerHTML = "" 清空），其行为在浏览器间存在显著差异：Chromium 会“回溯式”触发 change 事件，而 Firefox 则完全跳过——这导致关键数据丢失，尤其在表单动态重建、模态框关闭或组件卸载等场景下极易引发逻辑错误。

根本原因在于：change 事件的规范语义依赖于焦点状态变更。当用户点击按钮导致输入框被同步销毁时，Firefox 严格遵循“元素已不存在 → 无法触发事件”的 DOM 生命周期规则；而 Chromium 在元素被移除前隐式执行了 blur 流程，从而补发事件。根据 WHATWG HTML 标准，change 事件应在控件失去焦点且值改变后同步派发——因此 Firefox 的行为更符合规范，而 Chromium 的额外触发属于实现偏差（类似已知 issue crbug.com/1109552 中描述的“生命周期外事件”问题）。

✅ 正确解法：在销毁前主动 blur 输入框
必须在清空容器前，显式检查并触发当前聚焦输入框的 blur() 方法。这能确保：

• 所有浏览器均按标准流程派发 change 事件；
• 事件处理器（如 onchange）在 DOM 节点被移除前完成执行；
• 数据捕获逻辑不依赖浏览器实现细节。

以下是修正后的 reset_container 函数：

function reset_container() {
  const container = document.querySelector("#container");
  const inputEl = containe
r.querySelector("input");

  // 关键：若输入框处于聚焦状态，主动 blur 以触发 change
  if (inputEl && document.activeElement === inputEl) {
    inputEl.blur(); // 同步触发 change 事件
  }

  // 安全清空并重建
  container.innerHTML = "";
  container.append(create_input_el());
}

⚠️ 注意事项：

• 不要依赖 focusout 或 blur 事件监听器替代 blur() 调用：它们无法保证在节点销毁前执行；
• 避免使用 removeChild() 后再 blur()：节点已从 DOM 树分离，blur() 将静默失败；
• 对多输入框场景需遍历处理：若容器内含多个可编辑控件，应逐一检查 document.activeElement 并 blur；
• 配合 input 事件做实时备份（可选增强）：对于长文本等高风险场景，可同时监听 input 事件缓存中间值，change 仅用于最终确认。

总结：跨浏览器一致性不能靠“等待浏览器补发”，而应由开发者主动控制焦点生命周期。blur() 是轻量、标准、可靠的触发手段，它将不可控的浏览器差异转化为可预测的同步行为——这是构建鲁棒前端交互的基础实践。