How to use the dom-lib.on function in dom-lib

onTransitionEnd(node, handler) {
        this.setNextCallback(handler);

        if (node) {
            on(node, transitionEndEvent, this.nextCallback);
            setTimeout(this.nextCallback, this.props.timeout);
        } else {
            setTimeout(this.nextCallback, 0);
        }
    }

captureMouseMoves(event) {

        if (!this._eventMoveToken && !this._eventUpToken) {
            this._eventMoveToken = on(
                this._domNode,
                'mousemove',
                this._onMouseMove
            );
            this._eventUpToken = on(
                this._domNode,
                'mouseup',
                this._onMouseUp
            );
        }

        if (!this._isDragging) {
            this._deltaX = 0;
            this._deltaY = 0;
            this._isDragging = true;
            this._x = event.clientX;

activeNode.classList.add(addItemPrefix('holder'));
    this.activeNodeTranslateMin = {
      y:
        this.containerBoundingRect.top -
        this.activeNodeBoundingClientRect.top -
        this.activeNodeBoundingClientRect.height / 2
    };
    this.activeNodeTranslateMax = {
      y:
        this.containerBoundingRect.top +
        this.containerBoundingRect.height -
        this.activeNodeBoundingClientRect.top -
        this.activeNodeBoundingClientRect.height / 2
    };

    this.sortMouseMoveListener = on(window, 'mousemove', this.handleSortMove, { passive: false });
    this.sortMouseEndListener = on(window, 'mouseup', this.handleSortEnd, { passive: false });

    this.setState({ sorting: true });

    if (onSortStart) {
      onSortStart(
        {
          collection,
          node: activeNode,
          oldIndex: this.activeNodeOldIndex,
          newIndex: this.activeNodeNextIndex
        },
        event
      );
    }
  };

this.calculateTableWidth();
    this.calculateTableContextHeight();
    this.calculateRowMaxHeight();
    this.setAffixHeaderOffset();
    this.initPosition();
    bindElementResize(this.table, _.debounce(this.calculateTableWidth, 400));

    const options = { passive: false };

    this.wheelListener = on(this.tableBody, 'wheel', this.wheelHandler.onWheel, options);
    this.touchStartListener = on(this.tableBody, 'touchstart', this.handleTouchStart, options);
    this.touchMoveListener = on(this.tableBody, 'touchmove', this.handleTouchMove, options);

    const { affixHeader } = this.props;
    if (affixHeader === 0 || affixHeader) {
      this.scrollListener = on(window, 'scroll', this.updateAffixHeaderStatus);
    }
  }

componentDidMount() {
    this.setContainerOffset();
    this.scrollListener = on(window, 'scroll', this.updatePosition);
    bindElementResize(this.containerRef.current, this.setContainerOffset);
  }

EVENTS.move.forEach((eventName: TouchEventTypes | MouseEventTypes) =>
      on(this.listenerNode, eventName, this.handleSortMove, { passive: false })
    );

handleShow = () => {
    const dialogElement = this.dialogRef.current;

    this.updateModalStyles(dialogElement);
    this.contentElement = dialogElement.querySelector(`.${this.addPrefix('content')}`);
    this.windowResizeListener = on(window, 'resize', this.handleResize);

    bindElementResize(this.contentElement, this.handleResize);
  };
  handleHide = () => {

this.activeNodeTranslateMin = {
      y:
        this.containerBoundingRect.top -
        this.activeNodeBoundingClientRect.top -
        this.activeNodeBoundingClientRect.height / 2
    };
    this.activeNodeTranslateMax = {
      y:
        this.containerBoundingRect.top +
        this.containerBoundingRect.height -
        this.activeNodeBoundingClientRect.top -
        this.activeNodeBoundingClientRect.height / 2
    };

    this.sortMouseMoveListener = on(window, 'mousemove', this.handleSortMove, { passive: false });
    this.sortMouseEndListener = on(window, 'mouseup', this.handleSortEnd, { passive: false });

    this.setState({ sorting: true });

    if (onSortStart) {
      onSortStart(
        {
          collection,
          node: activeNode,
          oldIndex: this.activeNodeOldIndex,
          newIndex: this.activeNodeNextIndex
        },
        event
      );
    }
  };

componentDidMount() {
    this.calculateTableWidth();
    this.calculateTableContextHeight();
    this.calculateRowMaxHeight();
    this.setAffixHeaderOffset();
    this.initPosition();
    bindElementResize(this.table, _.debounce(this.calculateTableWidth, 400));

    const options = { passive: false };

    this.wheelListener = on(this.tableBody, 'wheel', this.wheelHandler.onWheel, options);
    this.touchStartListener = on(this.tableBody, 'touchstart', this.handleTouchStart, options);
    this.touchMoveListener = on(this.tableBody, 'touchmove', this.handleTouchMove, options);

    const { affixHeader } = this.props;
    if (affixHeader === 0 || affixHeader) {
      this.scrollListener = on(window, 'scroll', this.updateAffixHeaderStatus);
    }
  }

bindRootCloseHandlers() {
        let doc = window.document;
        this._onDocumentClickListener = on(doc, 'click', this.handleDocumentClick);
        this._onDocumentKeyupListener = on(doc, 'keyup', this.handleDocumentKeyUp);
    },
    handleDocumentClick(event) {