在基于原生 JavaScript 的 SPA 中，直接通过 document.getElementById 获取尚未加载的路由页面元素会返回 null；正确做法是监听全局 document 的 keypress 事件，并通过 event.target.id 动态判断焦点元素，从而安全触发登录逻辑。
在基于原生 javascript 的 spa 中，直接通过 `document.getelementbyid` 获取尚未加载的路由页面元素会返回 null；正确做法是监听全局 `document` 的 keypress 事件，并通过 `event.target.id` 动态判断焦点元素，从而安全触发登录逻辑。
在单页应用（SPA）中，路由切换通常不触发页面刷新，而是通过 fetch 动态插入 HTML 片段到 DOM（如本例中的 <div id="main-page">）。这意味着：元素仅在对应路由被激活后才存在。若在首页脚本中提前尝试获取 #password 或 #login_btn，必然得到 null —— 因为 /login 页面内容此时尚未加载。
✅ 正确方案：委托监听 + 条件判断
将事件监听器绑定到 document（或 #main-page），利用事件冒泡机制捕获按键行为，并通过 event.target.id 精准识别当前聚焦的输入框：
// 在 index.html 的 <script> 中统一注册（推荐放在 router.js 加载后）
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(); // 触发登录按钮逻辑
}
}
});? 为什么有效？
document 始终存在，且所有子元素的键盘事件都会向上冒泡至此。event.target 指向实际触发事件的元素（即用户正在输入的 <input>），无需预先知道其何时渲染。
? 补充建议与注意事项
-
更健壮的判断：可扩展支持 #email 输入框回车提交（如同时监听 id 为 'email' 或 'password'）：
if (['email', 'password'].includes(event.target?.id) && event.key === 'Enter') { ... } 避免重复绑定：若路由切换频繁，确保该监听器只注册一次（例如在 router.js 初始化时执行，而非每次 handleLocation() 调用时重复添加）。
-
语义化替代方案（推荐）：虽然你明确要求不用 <form>，但需指出——标准做法应是包裹输入框与按钮于 <form> 内，并监听 submit 事件：
<!-- login.html --> <form id="login-form"> <input type="email" id="email" name="email" /> <input type="password" id="password" name="password" /> <button type="submit">Login</button> </form>
// 统一监听表单提交（自动兼容 Enter 和点击） document.addEventListener('submit', e => { if (e.target.id === 'login-form') { e.preventDefault(); login(); // 执行登录逻辑 } }); 兼容性提示：event.target?.id 使用可选链操作符（ES2020+），如需支持旧浏览器，请改用 event.target && event.target.id === 'password'。
综上，事件委托是 SPA 中处理动态 DOM 元素交互的核心模式。它解耦了监听逻辑与元素生命周期，既保证可靠性，又提升代码可维护性。
