在基于原生 JavaScript 的 SPA 中，若在初始 HTML 加载时就尝试为尚未存在的 DOM 元素（如异步加载的登录表单）添加事件监听器，将导致 Cannot read properties of null 错误；正确做法是确保元素存在后再绑定，或在路由渲染完成后动态初始化。
在基于原生 javascript 的 spa 中，若在初始 html 加载时就尝试为尚未存在的 dom 元素（如异步加载的登录表单）添加事件监听器，将导致 `cannot read properties of null` 错误；正确做法是确保元素存在后再绑定，或在路由渲染完成后动态初始化。
该错误的根本原因在于：脚本在首页（index.html）中提前执行了 document.querySelector("#userinfo")，但此时 <form id="userinfo"></form> 尚未被加载到 DOM 中——它只存在于 /login 路由对应的 HTML 片段里。 因此 form 变量为 null，后续调用 .addEventListener() 自然抛出 TypeError。
✅ 正确解决方案：延迟初始化，按需绑定
最推荐的方式是将事件绑定逻辑移至页面内容加载完成之后执行，即在 handleLocation() 渲染完新内容后，再查找并绑定目标元素。修改 router.js 如下：
const handleLocation = async () => {
const path = window.location.pathname;
const route = routes[path] || routes[404];
const html = await fetch(route).then((data) => data.text());
const mainPage = document.getElementById("main-page");
mainPage.innerHTML = html;
// ✅ 关键：在此处初始化当前页面专属逻辑
initPageSpecificHandlers();
};
// 统一入口：根据当前路径注册对应逻辑
const initPageSpecificHandlers = () => {
const path = window.location.pathname;
if (path === "/login") {
const form = document.querySelector("#userinfo");
if (form) {
form.addEventListener("submit", (event) => {
event.preventDefault();
sendData();
});
} else {
console.warn("Login form (#userinfo) not found in current DOM");
}
}
};
// 提取公共函数（可置于全局或模块中）
async function sendData() {
const outputElement = document.getElementById('output');
if (outputElement) {
outputElement.innerHTML = "Form submitted successfully";
}
}? 注意：
sendData也需确保#output元素存在（它位于 login 页面模板中），因此同样建议在initPageSpecificHandlers中校验。
⚠️ 其他注意事项
-
避免全局脚本污染：不要将
form.addEventListener(...)直接写在主 HTML 的<script></script>块中（如你原始代码中那样），因其执行时机不可控。 -
防重复绑定：若用户多次切换到同一路由（如反复点击“Login”），需考虑移除旧监听器或使用事件委托（对
#main-page监听submit并判断event.target.id === 'userinfo'）。 -
现代替代方案：可结合
MutationObserver监听#main-page内容变化，或使用更健壮的前端框架（如 Vue/React）的生命周期钩子，但纯 Vanilla SPA 中显式控制初始化时机已足够可靠。
✅ 最终效果
当用户点击“login”链接 → route() 触发 → handleLocation() 加载 /pages/login.html → initPageSpecificHandlers() 检测到 /login 路径 → 安全获取 #userinfo 表单并绑定提交事件 → 表单可正常响应，不再报错。
通过将 DOM 操作与路由状态解耦，并严格遵循“先渲染、后操作”的原则，即可彻底规避 Cannot read properties of null 类型错误，构建稳定可维护的原生 SPA。
