Home > @cascadiacollections/fluentui-compat > EventGroup

EventGroup class

Ultra-optimized EventGroup utility class for managing multiple event listeners.

This class provides centralized management of DOM event listeners with automatic cleanup on disposal. It's particularly useful in React components for preventing memory leaks from forgotten event listeners.

Key performance features: - Efficient event tracking using Map for O(1) lookups - Automatic cleanup of all listeners on dispose - Support for both function callbacks and object methods - Proper handling of event listener options - Type-safe event management with TypeScript - Window reference caching to reduce DOM queries

**Performance considerations**: - Uses Map for O(1) event lookup and removal - Minimal memory allocations per event - Efficient batch cleanup on dispose - No memory leaks from orphaned listeners

**React integration**: While this class can be used directly, consider using useOnEvent hook for simpler React integration that automatically handles cleanup via useEffect.

Signature:

export declare class EventGroup 

Example 1

// Basic usage
const events = new EventGroup(this);

events.on(window, 'resize', this.handleResize);
events.on(document, 'click', this.handleClick);

// Clean up all listeners
events.dispose();

Example 2

// React class component usage
class MyComponent extends React.Component {
  private events = new EventGroup(this);

  componentDidMount() {
    this.events.on(window, 'resize', this.handleResize);
    this.events.on(document, 'keydown', this.handleKeyDown);
  }

  componentWillUnmount() {
    this.events.dispose();
  }

  handleResize = () => {
    console.log('Window resized');
  };

  handleKeyDown = (event: KeyboardEvent) => {
    console.log('Key pressed:', event.key);
  };
}

Example 3

// Multiple events on same target
const events = new EventGroup();

events.on(element, 'mousedown', handleMouseDown);
events.on(element, 'mouseup', handleMouseUp);
events.on(element, 'mousemove', handleMouseMove);

// Remove specific event
events.off(element, 'mousemove');

// Remove all events on target
events.off(element);

// Remove all events
events.dispose();

Example 4

// With event listener options
const events = new EventGroup();

// Passive scroll listener for better performance
events.on(window, 'scroll', handleScroll, { passive: true });

// Capture phase event
events.on(document, 'click', handleClick, true);

// Once option - automatically removed after first call
events.on(button, 'click', handleClick, { once: true });

Example 5

// Conditional event management
const events = new EventGroup(this);

if (isMobile) {
  events.on(element, 'touchstart', handleTouchStart);
  events.on(element, 'touchend', handleTouchEnd);
} else {
  events.on(element, 'mousedown', handleMouseDown);
  events.on(element, 'mouseup', handleMouseUp);
}

// All events cleaned up regardless of which were added
events.dispose();

Constructors

Constructor	Modifiers	Description
(constructor)(parent)		Creates a new EventGroup instance.

Methods

Method	Modifiers	Description
declare(_hasEventName)		Declares an event that this group will manage. This is a no-op method for API compatibility with FluentUI's EventGroup. In the original implementation, this was used for TypeScript type checking, but modern TypeScript doesn't require this pattern.
dispose()		Disposes of the EventGroup instance and removes all registered event listeners. This method should be called when the EventGroup is no longer needed to prevent memory leaks. It will remove all event listeners and clear internal tracking. After disposal, the instance cannot be reused.
off(target, eventName, callback, options)		Removes event listeners from the specified target. This method can remove: - All events from a target (if only target is provided) - All events of a specific type from a target (if target and eventName provided) - A specific event listener (if all parameters provided)
on(target, eventName, callback, options)		Adds an event listener to the specified target. This method registers an event listener and tracks it for automatic cleanup. Multiple listeners can be added to the same target/event combination.
raise(eventName, eventArgs)		Raises a synthetic event by invoking all registered callbacks for the specified event. This method can be used to programmatically trigger events without actually firing them on the DOM. Useful for testing and custom event patterns.