Prevent Memory Leaks and Master Event Handling in JavaScript

Memory Leak from Unremoved Listeners

Memory leaks are common in frontend development, especially when event listeners are attached to elements that are later removed without detaching the listeners. In single‑page applications the memory accumulates because the page never reloads.

// ❌ Incorrect example: not removing listener when element is deleted
// The listener remains in memory even after the element is removed
function createButton() {
  const button = document.createElement('button');
  button.textContent = '点击我';
  // Anonymous arrow function cannot be removed later
  button.addEventListener('click', () => { console.log('点击了'); });
  document.body.appendChild(button);
  // Delete after 5 seconds, but listener stays attached
  setTimeout(() => {
    document.body.removeChild(button);
    /* Listener not cleaned up, still occupies memory */
  }, 5000);
}

// ✅ Correct example: remove listener before deleting element
function createButton() {
  const button = document.createElement('button');
  button.textContent = '点击我';
  // Named function allows later removal
  const handleClick = () => { console.log('点击了'); };
  button.addEventListener('click', handleClick);
  document.body.appendChild(button);
  setTimeout(() => {
    button.removeEventListener('click', handleClick);
    document.body.removeChild(button);
  }, 5000);
}

Closure Issues When Creating Listeners in Loops

Using var in a loop creates a single function‑scoped variable, causing all listeners to capture the final value of the loop counter. Switching to let, an IIFE, or data attributes solves the problem.

// ❌ Incorrect example with var
const buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() { console.log('索引：' + i); });
}

// ✅ Correct example 1: use let
for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() { console.log('索引：' + i); });
}

// ✅ Correct example 2: IIFE
for (var i = 0; i < buttons.length; i++) {
  (function(index) {
    buttons[index].addEventListener('click', function() { console.log('索引：' + index); });
  })(i);
}

// ✅ Correct example 3: data attribute
buttons.forEach((button, index) => {
  button.dataset.index = index;
  button.addEventListener('click', function() { console.log('索引：' + this.dataset.index); });
});

Event Delegation and target/currentTarget

Event delegation leverages bubbling by attaching a single listener to a parent element instead of each child, improving performance for many dynamic elements. Understanding e.target (the original element) versus e.currentTarget (the element with the listener) is essential.

// Delegation example
// HTML: <div id="parent"><button>按钮1</button><button>按钮2</button></div>
const parent = document.getElementById('parent');
parent.addEventListener('click', function(e) {
  console.log('target:', e.target);
  console.log('currentTarget:', e.currentTarget);
  console.log('this:', this);
  if (e.target.tagName === 'BUTTON') {
    console.log('Clicked button:', e.target.textContent);
  }
});

Debounce and Throttle

Debounce delays execution until a pause occurs (useful for search inputs), while throttle limits execution to at most once per interval (useful for scroll events).

// Debounce function
function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => { func.apply(this, args); }, delay);
  };
}
// Usage: search input
const searchInput = document.getElementById('search');
searchInput && searchInput.addEventListener('input', debounce(function(e) {
  console.log('搜索：', e.target.value);
}, 500));

// Throttle function
function throttle(func, delay) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}
// Usage: scroll event
window.addEventListener('scroll', throttle(function() {
  console.log('滚动位置：', window.scrollY);
}, 200));

Naming Conventions and Error Protection

Adopt a consistent naming scheme such as domain:action or domain.action to avoid conflicts and clarify intent. Wrap listener execution in try/catch to prevent a single faulty handler from breaking others.

// Naming examples
eventBus.emit('user:login', userData);
eventBus.emit('cart:itemAdded', item);
eventBus.emit('order.completed', order);

// SafeEventBus with error isolation
class SafeEventBus extends EventBus {
  emit(eventName, ...args) {
    const callbacks = this.events[eventName];
    if (callbacks) {
      callbacks.forEach(callback => {
        try { callback(...args); }
        catch (error) {
          console.error(`事件 ${eventName} 的监听器出错：`, error);
        }
      });
    }
  }
}

Debug‑Friendly Event Bus

During development, a debug‑enabled bus logs subscriptions and emissions, while production disables these logs for performance.

// DebugEventBus adds optional logging
class DebugEventBus extends EventBus {
  constructor(debug = false) { super(); this.debug = debug; }
  on(eventName, callback) {
    if (this.debug) console.log(`📌 订阅事件：${eventName}`);
    return super.on(eventName, callback);
  }
  emit(eventName, ...args) {
    if (this.debug) console.log(`🔔 触发事件：${eventName}`, args);
    return super.emit(eventName, ...args);
  }
}
// Development
const dbgBus = new DebugEventBus(true);
// Production (logging disabled)
// const dbgBus = new DebugEventBus(false);

Governance Recommendations

Maintain a unified namespace (e.g., user:, order:, cart:) to prevent name collisions and document each event’s purpose, payload, and lifecycle. For deprecated events, use a dual‑write strategy before removal. Enable log sampling or throttling for high‑frequency events, and keep the debug switch configurable to toggle detailed logs between development and production environments.