在基于原生 JavaScript 的 SPA 中，直接通过 document.getElementById() 为尚未加载的路由页面元素（如 /login 中的密码框）绑定事件会失败；正确做法是委托监听 document，再根据 event.target.id 动态判断并响应。
在基于原生 javascript 的 spa 中，直接通过 `document.getelementbyid()` 为尚未加载的路由页面元素（如 `/login` 中的密码框）绑定事件会失败；正确做法是委托监听 `document`，再根据 `event.target.id` 动态判断并响应。
在单页应用（SPA）中，页面内容通过 AJAX 动态注入（如你的 handleLocation() 函数将 /pages/login.html 插入 #main-page），这意味着 DOM 元素仅在对应路由被访问时才存在。因此，在 index.html 的全局脚本中提前查询 #password 或 #login_btn，必然返回 null —— 因为此时 /login 页面尚未加载。
✅ 正确解法：事件委托（Event Delegation）
将事件监听器绑定到长期存在的、顶层的稳定节点（如 document），利用事件冒泡机制捕获目标元素的交互，再通过 event.target 的属性（如 id、tagName 或 dataset）精确识别和响应。
以下是推荐的实现方式：
在SEO发布前，从路由清单生成XML网站地图和robots.txt
下载
当代理已经知道网站路由或内容URL，并且在启动前需要有效的sitemap XML、sitemap索引或robots.txt引用时，请使用sitemap。这是一个发布构件技能，而不是爬虫或SEO平台。
// ✅ 在 index.html 或 router.js 的全局作用域中添加（确保 DOM 加载后执行）
document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('keypress', function(event) {
// 检查是否在 password 输入框中按下 Enter
if (event.target?.id === 'password' && event.key === 'Enter') {
event.preventDefault();
const loginBtn = document.getElementById('login_btn');
if (loginBtn) {
loginBtn.click(); // 触发登录按钮逻辑
} else {
console.warn('Login button (#login_btn) not found. Ensure login.html is loaded.');
}
}
});
});
? 关键说明与注意事项：
- event.target?.id 使用可选链操作符（?.）避免 null/undefined 报错，兼容未匹配元素；
- event.preventDefault() 必须调用，否则回车可能触发默认表单提交或页面跳转；
- 不依赖 #password 是否已存在——只要它出现在当前 DOM 中且获得焦点，事件即能被捕获；
- 若需支持多个输入框（如邮箱+密码均支持 Enter 提交），可扩展判断逻辑：
if (['email', 'password'].includes(event.target?.id) && event.key === 'Enter') { ... } - ⚠️ 确保 login.html 中的元素 ID 唯一且拼写准确（如 id="password" 而非 id="Password"），且无重复 ID 冲突；
- 若使用异步加载（如 fetch + innerHTML），事件监听器必须在 handleLocation() 执行之前注册（推荐放在 DOMContentLoaded 或 <script> 底部），而非在路由切换后重复绑定，避免内存泄漏。</script>
? 进阶提示：若项目规模扩大，建议将路由级行为封装为“生命周期钩子”，例如在 handleLocation() 渲染完成后调用 initLoginPage()，但对当前轻量场景，事件委托是最简洁、健壮、无需状态管理的解决方案。
