jQuery .off('keydown') on Document Removes Handlers You Didn't Write

TLDR

Calling un-namespaced jQuery cleanup methods ($(document).off('keydown')) detaches all keydown listeners across the element, including delegated handlers attached by other modules. Scoping removals to explicit namespaces (.off('keydown.myModule')) or binding directly to specific DOM elements prevents accidental listener removal.

Cleanup Method	Scope of Removal	Impact on Other Modules	Handler Safety
Bare .off('keydown')	All keydown listeners on element	Detaches third-party handlers	Destructive & Unsafe
Namespaced .off('keydown.mod')	Module-specific listeners only	Zero impact on other modules	100% Isolated & Safe

---

Un-namespaced off calls detach all registered handlers across shared elements

Delegating global keyboard shortcuts from $(document) is common in single-page applications. However, resetting shortcut bindings using bare .off('keydown') calls strips all keydown listeners attached to document:

// Destructive: Detaches all keydown handlers across the document
$(document).off('keydown').on('keydown', dispatchGlobalShortcuts);

When other modules delegate keydown listeners from document ($(document).on('keydown', '#input', addPill)), running the un-scoped .off() call silently removes third-party delegated handlers.

---

Event namespaces and target-specific bindings isolate event cleanup

We resolved listener removal issues by applying explicit event namespaces and binding directly to specific target elements:

// 1. Apply explicit event namespaces during cleanup
$(document).off('keydown.globalShortcuts').on('keydown.globalShortcuts', dispatchGlobalShortcuts);
// 2. Bind input-specific handlers directly to target elements $('#classInput')   .off('keydown.classPills')   .on('keydown.classPills', (e) => {     if (e.key === 'Enter') addClassPill(e.target.value);   });

Binding listeners directly to #classInput ensures document-level cleanup routines leave input event handlers intact.

Document Event Registry:
+------------------------------------------+
| keydown                                  |
|  - Handler 1 (globalShortcuts namespace) |
|  - Handler 2 (classPills namespace)      |
|  - Handler 3 (No namespace)             |
+------------------------------------------+
Running: $(document).off('keydown') Result: Wipes Handler 1, 2, and 3! (Blanket delete)
Running: $(document).off('keydown.globalShortcuts') Result: Only removes Handler 1. Handler 2 & 3 remain intact!

Rule of thumb: Always namespace jQuery event bindings and avoid calling bare .off() on shared container elements.