Creating Custom Events

How do you properly clean up custom event listeners to prevent memory leaks?

class ComponentWithEvents {
  constructor() {
    this.handleEvent = this.handleEvent.bind(this);
    document.addEventListener('customEvent', this.handleEvent);
  }

  destroy() {
    document.removeEventListener('customEvent', this.handleEvent);
  }

  handleEvent(e) {
    console.log('Event handled:', e.detail);
  }
}

Let the garbage collector handle it
Remove listeners when component is destroyed
Proper cleanup of custom event listeners is crucial to prevent memory leaks: 1. Always remove event listeners when they're no longer needed: - When components are destroyed/unmounted - When temporary listeners are no longer required - When switching event targets 2. Keep track of all attached listeners: - Store references to handler functions - Document listener lifecycle - Consider using a central registry 3. Bind event handlers properly: - Use class methods or bound functions - Maintain correct this context 4. Follow component lifecycle: - Add listeners during initialization - Remove listeners during cleanup - Handle dynamic target changes
Use weak references only
Never remove event listeners

Next Question (11/20)