How to use the dom-helpers/events/on function in dom-helpers

subscribe(listener) {
    const onHashChange = () => {
      // Ignore hash change events triggered by our own navigation.
      if (this._numExpectedHashChanges > 0) {
        --this._numExpectedHashChanges;
        return;
      }

      listener(this.init());
    };

    on(window, 'hashchange', onHashChange);
    return () => off(window, 'hashchange', onHashChange);
  }

addEventListeners() {
        const { event } = this.props;
        const doc = ownerDocument(ReactDOM.findDOMNode(this));

        // Use capture for this listener so it fires before React's listener, to
        // avoid false positives in the contains() check below if the target DOM
        // element is removed in the React mouse callback.
        addEventListener(doc, event, this.handleMouseCapture, true);
        addEventListener(doc, event, this.handleMouse);
        addEventListener(doc, 'keyup', this.handleKeyUp);
    }

} else {
      this._oldScrollRestoration = null;
    }

    this._saveWindowPositionHandle = null;
    this._checkWindowScrollHandle = null;
    this._windowScrollTarget = null;
    this._numWindowScrollAttempts = 0;
    this._ignoreScrollEvents = false;

    this._scrollElements = {};

    // We have to listen to each window scroll update rather than to just
    // location updates, because some browsers will update scroll position
    // before emitting the location change.
    on(window, 'scroll', this._onWindowScroll);

    this._removeTransitionHook = addTransitionHook(() => {
      requestAnimationFrame.cancel(this._saveWindowPositionHandle);
      this._saveWindowPositionHandle = null;

      Object.keys(this._scrollElements).forEach(key => {
        const scrollElement = this._scrollElements[key];
        requestAnimationFrame.cancel(scrollElement.savePositionHandle);
        scrollElement.savePositionHandle = null;

        // It's fine to save element scroll positions here, though; the browser
        // won't modify them.
        if (!this._ignoreScrollEvents) {
          this._saveElementPosition(key);
        }
      });

if (
      'scrollRestoration' in window.history &&
      // Unfortunately, Safari on iOS freezes for 2-6s after the user swipes to
      // navigate through history with scrollRestoration being 'manual', so we
      // need to detect this browser and exclude it from the following code
      // until this bug is fixed by Apple.
      !isMobileSafari()
    ) {
      this._oldScrollRestoration = window.history.scrollRestoration;
      try {
        window.history.scrollRestoration = 'manual';

        // Scroll restoration persists across page reloads. We want to reset
        // this to the original value, so that we can let the browser handle
        // restoring the initial scroll position on server-rendered pages.
        on(window, 'beforeunload', this._restoreScrollRestoration);
      } catch (e) {
        this._oldScrollRestoration = null;
      }
    } else {
      this._oldScrollRestoration = null;
    }

    this._saveWindowPositionHandle = null;
    this._checkWindowScrollHandle = null;
    this._windowScrollTarget = null;
    this._numWindowScrollAttempts = 0;
    this._ignoreScrollEvents = false;

    this._scrollElements = {};

    // We have to listen to each window scroll update rather than to just

cssProperties.push(hyphenate(key))
    }
  }

  if (transforms) {
    cssValues[transitionProps.transform] = transforms
    cssProperties.push(transitionProps.transform)
  }

  if (duration > 0 ) {
    cssValues[transitionProps.property] = cssProperties.join(', ')
    cssValues[transitionProps.duration] = (duration / 1000) + 's'
    cssValues[transitionProps.delay]    = 0 + 's'
    cssValues[transitionProps.timing]   = easing || 'linear'

    on(node, transitionProps.end, done)

    setTimeout(function(){
      if (!fired) done(fakeEvent)
    }, duration + 500)
  }

  node.clientLeft // trigger page reflow
  css(node, cssValues)

  if (duration <= 0)
    setTimeout(done.bind(null, fakeEvent), 0)

  return {
    cancel() {
      if (fired) return
      fired = true

currentKey = createKey(loc, config)
    // first try to check hash
    // second try to scrollTo State
    // finally scrollToTop
    !scrollToHash(loc) && !scrollToState(currentKey) && window.scrollTo(0, 0)
  })
  const onScroll = () => {
    if (canUseStorage) {
      const y = scrollTop(window)
      if (y && currentKey) {
        saveState(currentKey, y)
      }
    }
  }

  on(window, 'scroll', debounce(onScroll, scrollThreshold))
  return history
}

function checkStart() {
    if (numListeners === 0) {
      if (start) {
        start(history)
      }

      scrollTarget = null
      numScrollAttempts = 0
      checkScrollHandle = null

      on(window, 'scroll', onScroll)
    }

    ++numListeners
  }

function addEventListenerEnhanced(node, event, handler, options) {
  addEventListener(node, event, handler, options);
  return {
    remove() {
      removeEventListener(node, event, handler, options);
    },
  };
}

onTransitionEnd(
    element: HTMLElement,
    eventType: 'enter' | 'exit',
    handler: SyntheticUIEventHandler,
  ) {
    this.setNextCallback(handler);

    if (element) {
      addEventListener(element, transitionEndEvent, event => {
        if (event.target === element && this.nextCallback) {
          this.nextCallback();
        }
      });
      setTimeout(this.nextCallback, this.getTimeouts(element)[eventType]);
    } else {
      setTimeout(this.nextCallback, 0);
    }
  }