JS 事件代理：onkeyup 事件觸發後輸入框焦點會自動消失嗎？

問題描述

在使用 JavaScript 事件代理時，開發者發現綁定 onkeyup 事件後，文本輸入框的焦點似乎會自動消失，這讓人感到困惑並急需解決方案。

專家解答

這個現象並非 onkeyup 事件的預設行為。 正常情況下，onkeyup 事件觸發後，焦點應保持在當前輸入元素上，不會自動轉移或消失。如果發生焦點丟失，通常是由以下原因導致：

• 事件處理函數中存在 blur() 調用或導致焦點轉移的邏輯
• DOM 結構被重新渲染（如使用 innerHTML 重置父容器），導致原輸入元素被銷毀並重建
• CSS 樣式變更（如 display: none 或 visibility: hidden）使元素不可見
• 其他事件監聽器（如 onkeydown、onkeypress）干擾了焦點行為

排查建議

1. 檢查事件處理代碼中是否有顯式調用 element.blur() 或 element.focus() 轉移焦點
2. 確認是否使用了會銷毀並重建 DOM 的操作（如 jQuery .html()、React 狀態更新導致組件重新掛載）
3. 使用瀏覽器開發者工具的 Event Listeners 面板檢查綁定在該元素及其祖先元素上的所有鍵盤事件
4. 嘗試在隔離環境中測試：建立一個僅包含輸入框和 onkeyup 綁定的簡單頁面，驗證焦點是否正常保持

最佳實踐

使用事件代理時，建議將事件綁定在較高層級的穩定容器上（如 document 或表單元素），並通過 event.target 判斷事件源。同時避免在事件處理中進行大範圍 DOM 更新，必要時可使用 requestAnimationFrame 或微任務延遲執行 DOM 操作，以減少焦點干擾。