How to use the global/document.addEventListener function in global

if (model.effects) apply(model.namespace, model.effects, effects)
    })

    // send() is used to trigger actions inside
    // views, effects and subscriptions
    const send = sendAction({
      onaction: handleAction,
      onchange: onchange,
      state: initialState
    })

    // subscriptions are loaded after sendAction() is called
    // because they both need access to send() and can't
    // react to actions (read-only) - also wait on DOM to
    // be loaded
    document.addEventListener('DOMContentLoaded', function () {
      _models.forEach(function (model) {
        if (model.subscriptions) {
          assert.ok(Array.isArray(model.subscriptions), 'subs must be an arr')
          model.subscriptions.forEach(function (sub) {
            sub(send)
          })
        }
      })
    })

    // If an id is provided, the application will rehydrate
    // on the node. If no id is provided it will return
    // a tree that's ready to be appended to the DOM.
    //
    // The rootId is determined to find the application root
    // on update. Since the DOM nodes change between updates,

onload(overlay, function () {
      document.addEventListener('mousedown', didClickOut, false)
    }, function () {
      document.removeEventListener('mousedown', didClickOut, false)

handleTouchStart = e => {
    document.addEventListener('touchend', this._touchend);
    document.addEventListener('touchmove', this._touchmove);
    this._prev = this._getTouchPosition(e);
    this._toggleMouseOver();
  };

return signal(function (next) {
        var down = {}

        document.addEventListener("keyup", function onup(ev) {
            if (ev.which in KEYS) {
                var key = KEYS[ev.which]
                down[key] = false

                next(getState())
            }
        })

        document.addEventListener("keydown", function ondown(ev) {
            if (ev.which in KEYS) {
                var key = KEYS[ev.which]
                down[key] = true

                next(getState())
            }
        })

['click', 'dblclick', 'mousemove', 'mouseup', 'mousedown'].forEach(name =>
      document.addEventListener(name, this._onMouseEvent, true)
    );

function handleChange(next) {
        document.addEventListener("keypress", function (ev) {
            var target = ev.target
            var fn = storage.get("change", target)

            if (!fn || target.type !== "text") {
                return
            }

            nextTick(fn(target.value), target)
        })

        document.addEventListener("change", function (ev) {
            var target = ev.target
            var fn = storage.get("change", target)

            if (!fn || target.type !== "checkbox") {
                return

if (Object.keys(watch).length < 1) return;
        for (var i = 0; i < mutations.length; i++) {
          if (mutations[i].attributeName === KEY_ATTR) {
            eachAttr(mutations[i], turnon, turnoff);
            continue;
          }
          eachMutation(mutations[i].removedNodes, function (index, el) {
            if (!document.documentElement.contains(el)) turnoff(index, el);
          });
          eachMutation(mutations[i].addedNodes, turnon);
        }
      });
      if (document.body) {
        beginObserve(observer);
      } else {
        document.addEventListener('DOMContentLoaded', function (event) {
          beginObserve(observer);
        });
      }
    }

    function beginObserve(observer) {
      observer.observe(document.documentElement, {
        childList: true,
        subtree: true,
        attributes: true,
        attributeOldValue: true,
        attributeFilter: [KEY_ATTR]
      });
    }

    module.exports = function onload(el, on, off, caller) {

_onMouseDown(event) {
    const pos = this._getMousePos(event);
    this.setState({
      didDrag: false,
      startPos: pos,
      pos,
      isFunctionKeyPressed: this._isFunctionKeyPressed(event)
    });
    this.props.onMouseDown({pos});
    document.addEventListener('mousemove', this._onMouseDrag, false);
    document.addEventListener('mouseup', this._onMouseUp, false);
  }

function handleChange(next) {
        document.addEventListener("keypress", function (ev) {
            var target = ev.target
            var fn = storage.get("change", target)

            if (!fn || target.type !== "text") {
                return
            }

            nextTick(fn(target.value), target)
        })

        document.addEventListener("change", function (ev) {
            var target = ev.target
            var fn = storage.get("change", target)

            if (!fn || target.type !== "checkbox") {
                return
            }

            nextTick(fn(target.checked), target)
        })
    }