Does A-Frame automatically remove global event listeners when an entity is removed from the scene?

Direct Answer

No. A-Frame does not automatically remove event listeners attached to window, document, or any other global object when an entity is removed from the scene. The framework only invokes the component's remove lifecycle hook; it does not track or clean up listeners that the component registered on global targets.

Why This Happens

A-Frame's entity-component system manages component lifecycle hooks (init, update, remove, etc.) but has no visibility into what a component does inside those hooks. When you call window.addEventListener('resize', handler) in init, the browser holds a reference to handler. Unless you explicitly call removeEventListener with the exact same function reference, that listener—and the component instance captured in its closure—remains reachable and blocks garbage collection.

Required Cleanup Pattern

Implement the remove hook and detach every global listener you added:

AFRAME.registerComponent('track-pointer', {
  init: function () {
    // Bind once so the same reference can be removed later
    this.onResize = this.onResize.bind(this);
    this.onPointerMove = this.onPointerMove.bind(this);
    window.addEventListener('resize', this.onResize);
    document.addEventListener('pointermove', this.onPointerMove);
  },
  remove: function () {
    window.removeEventListener('resize', this.onResize);
    document.removeEventListener('pointermove', this.onPointerMove);
  },
  onResize: function () { /* ... */ },
  onPointerMove: function () { /* ... */ }
});

Key rules:

• Store bound handlers as component properties (this.onResize) so the identical reference is available in remove.
• Never use anonymous or arrow functions directly in addEventListener if you need to remove them later.
• If update adds listeners, clean up the previous set first to avoid duplicates.

Verification Steps

1. Create a minimal scene with the component above.
2. Programmatically remove the entity: entity.parentNode.removeChild(entity).
3. Trigger a resize or pointermove event.
4. Confirm the handler does not fire (add a console.log in the handler).
5. Open Chrome DevTools → Elements → Event Listeners panel on window and verify the listener is gone.

Version Consistency

This behavior has been stable across all A-Frame 1.x releases (1.0 through 1.6+). No minor version introduced automatic global listener cleanup. The documented pattern above remains the only reliable approach.

One Diagnostic Detail

If your component adds listeners in update (which can run multiple times), share the update logic. That changes whether you need an idempotent guard or a pre-cleanup step before re-registering.