Wrap DOM Event Listeners Into a Subscribable Stream With Automatic Cleanup

We are building a High-Frequency Trading Terminal. The interface has hundreds of buttons, inputs, and real-time data toggles. Using raw addEventListener across the app has led to memory leaks because developers frequently forget to call removeEventListener when components are destroyed.

The Task: Implement a simplified Observable.fromEvent utility. This utility must encapsulate the event listener logic so that the lifecycle of the event is tied directly to the subscription. When a user subscribes, the listener is attached; when they unsubscribe, it is removed. How do you ensure this is memory-safe and supports multiple independent observers?

Language

Sample Test Cases

Case 1

Input

subscribe to click, trigger click

Expected Output

next receives event

Case 2

Input

["click", "#btn1", 1]

Expected Output

["click-btn1-1"]

Case 3

Input

unsubscribe, trigger click

Expected Output

no callback

Case 4

Input

["mouseover", "#div1", 2]

Expected Output

["mouseover-div1-1", "mouseover-div1-2"]

Case 5

Input

multiple subscribers

Expected Output

all fire on event

Case 6

Input

["keydown", "#input1", 1, {"key": "Enter"}]

Expected Output

["keydown-input1-1-Enter"]

Wrap DOM Event Listeners Into a Subscribable Stream With Automatic Cleanup

Sample Test Cases

Comments (0)

Wrap DOM Event Listeners Into a Subscribable Stream With Automatic Cleanup

Sample Test Cases

Comments (0)