Skip to main content

Class: TargetEventListeners

TargetEventListeners adds support for event types with namespace, allow removing events without having to pass a callback and makes it possible to remove all event listeners in a much simpler way avoiding leaving listeners behind which would result in memory leaks.

Examples​

Creating a new TargetEventListeners instance

  const element = document.getElementById('foo');
  const targetEventListeners = new TargetEventListeners(element)

Adding and removing event listeners

  const dragCallback = () => { };

  targetEventListeners.addEventListener('voi.mousemove', dragCallback);
  targetEventListeners.addEventListener('voi.drag', dragCallback);
  targetEventListeners.addEventListener('voi.mouseup', () => {
    // do not need to store a reference of this function
  }));

  // Removes a specific event listener
  targetEventListeners.removeEventListener('voi.mousemove', dragCallback)

  // Removes all "mouseup" event listeners added to "colorbar.voi" namespace
  targetEventListeners.removeEventListener('voi.mouseup')

  // Removes all event listeners added to the element using this targetEventListeners
  // instance. A TargetEventListeners instance does not removes the event listeners
  // added by another one.
  targetEventListeners.reset();

Adding and removing event listeners for capture and bubble phases. Each listener must be removed indenpendently

  const clickCaptureCallback = () => { };
  const clickBubbleCallback = () => { };

  targetEventListeners.addEventListener('click', clickCaptureCallback, { capture: true });
  targetEventListeners.addEventListener('click', clickBubbleCallback);

  // Removes the event listener added to the capture phase
  targetEventListeners.removeEventListener('click', clickCaptureCallback, { capture: true });

  // Removes the event listener added to the bubble phase
  targetEventListeners.removeEventListener('click', clickBubbleCallback);

  // Removes all event listeners added to the HTML element
  targetEventListeners.reset();

Constructors​

new TargetEventListeners()​

new TargetEventListeners(target): TargetEventListeners

Parameters​

• target: EventTarget

Returns​

TargetEventListeners

Defined in​

packages/core/src/utilities/eventListener/TargetEventListeners.ts:71

Accessors​

isEmpty​

get isEmpty(): boolean

Returns​

boolean

Defined in​

packages/core/src/utilities/eventListener/TargetEventListeners.ts:75

Methods​

addEventListener()​

addEventListener(type, callback, options?): void

Parameters​

• type: string

• callback: EventListener

• options?: AddEventListenerOptions

Returns​

void

Defined in​

packages/core/src/utilities/eventListener/TargetEventListeners.ts:79

removeEventListener()​

removeEventListener(type, callback?, options?): void

Remove an event listener with support for namespaces and optional callback which makes it remove all listeners of a given type

Parameters​

• type: string

Event type

• callback?: EventListener

Event listener

• options?: EventListenerOptions

Event options

Returns​

void

Defined in​

packages/core/src/utilities/eventListener/TargetEventListeners.ts:110

reset()​

reset(): void

Loop through all types, listeners and phases and removing all of them

Returns​

void

Defined in​

packages/core/src/utilities/eventListener/TargetEventListeners.ts:141