在基于原生 JavaScript 的 SPA 中，直接通过 document.getElementById 获取尚未加载的路由页面元素会返回 null；正确做法是监听全局 document 的键盘事件，并通过 event.target.id 动态判断焦点元素，从而安全触发登录逻辑。
在基于原生 javascript 的 spa 中，直接通过 `document.getelementbyid` 获取尚未加载的路由页面元素会返回 null；正确做法是监听全局 `document` 的键盘事件，并通过 `event.target.id` 动态判断焦点元素，从而安全触发登录逻辑。
在单页应用（SPA）中，页面内容通过 JavaScript 动态注入（如 innerHTML 替换），这意味着 DOM 元素仅在对应路由被激活并渲染后才真实存在。你当前在 index.html 的 <script> 中尝试获取 #password 元素——此时 /login 页面尚未加载，document.getElementById("password") 必然返回 null，导致事件监听失败。</script>
✅ 正确解法：委托事件监听（Event Delegation）
将事件监听器绑定到长期存在的顶层节点（如 document），利用事件冒泡机制捕获子元素触发的事件。由于 document 始终存在，且所有输入框的 keypress 事件都会向上冒泡至此，我们只需在回调中校验目标元素是否符合预期：
// 在 index.html 或全局入口脚本中统一注册（推荐放在 router.js 后或 handleLocation 之后）
document.addEventListener('keypress', function(event) {
// 使用可选链确保兼容性（现代浏览器支持），也可用 event.target && event.target.id === 'password'
if (event.target?.id === 'password' && event.key === 'Enter') {
event.preventDefault(); // 阻止默认换行等行为
const loginBtn = document.getElementById('login_btn');
if (loginBtn) {
loginBtn.click(); // 触发绑定的 login() 函数
}
}
});
? 补充建议与注意事项：
- 避免重复绑定：若 handleLocation() 可能被多次调用（如前进/后退），请确保该监听器只注册一次（例如在脚本最外层执行，而非每次路由切换时重复添加）。
-
扩展性优化：如需支持多个表单（如注册页、重置密码页），可统一监听 input[type="password"] 或添加自定义 data-submit-on-enter="true" 属性，再通过 event.target.matches() 判断：
if (event.target.matches('input[type="password"], input[type="email"]') && event.key === 'Enter') { ... } - 无障碍与体验：Enter 提交是用户预期行为，但务必确保按钮 #login_btn 具有 type="button"（默认即 button）或显式声明 type="button"，避免意外触发表单提交（即使未用
- 调试技巧：可在监听器中加入 console.log(event.target, event.target.id) 快速验证焦点元素是否正确捕获。
综上，不依赖元素“提前存在”，而是信任事件流与 DOM 状态的实时性，是构建健壮 SPA 交互的关键思维——这既是技术方案，也是对单页应用生命周期的正确认知。
