JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <body>
    <button onclick="subscribe()">Subscribe</button>
    <button id="emitter">Emit</button>
    <button onclick="free()">Free</button>
    <script>

    const emitter = document.getElementById("emitter");
    let listener = null;

    function addWeakEventListener(element, event, callback) {
        const weakRef = new WeakRef({ callback });
        const listener = () => {
            const obj = weakRef.deref();
            if (obj == null) {
                console.log("Removing garbage collected event listener");
                element.removeEventListener(event, listener);
            } else {
                obj.callback();
            }
        };
        element.addEventListener(event, listener);
    }

    function subscribe() {
        listener = () => console.log("Event fired!");
        addWeakEventListener(emitter, "click", listener);
        console.log("Listener created and subscribed to emitter");
    }

    function free() {
        listener = null;
        console.log("Reference cleared. Now force garbage collection in dev console or wait some time before clicking Emit again.");
    }

    </script>
  </body>
</html>