How to use the carbon-components/es/globals/js/misc/on function in carbon-components

connectedCallback() {
    super.connectedCallback();
    // Manually hooks the event listeners on the host element to make the event names configurable
    this._hChangePage = on(
      this,
      (this.constructor as typeof BXPagination).eventAfterChangePage,
      this._handleChangePage as EventListener
    );
    this._hChangePageSize = on(
      this,
      (this.constructor as typeof BXPagination).eventAfterChangePageSize,
      this._handleChangePageSize as EventListener
    );
  }

// Modifies event listener options with `capture` option to use for delegated `focus`/`blur` event
          let massagedOptions: boolean | AddEventListenerOptions = typeof options === 'undefined' ? false : options;
          if (delegatedType) {
            if (Object(options) === options) {
              massagedOptions = {
                ...Object(options),
                capture: !hasFocusin,
              };
            } else {
              massagedOptions = !hasFocusin;
            }
          }

          this._handles.add(
            on(target, (delegatedType || unprefixedType) as keyof HTMLElementEventMap, this[listenerName], massagedOptions)
          );
        });
      });

connectedCallback() {
    super.connectedCallback();
    // Manually hooks the event listeners on the host element to make the event names configurable
    this._hAfterChangeRadioButton = on(
      this,
      (this.constructor as typeof BXRadioButtonGroup).eventAfterChangeRadioButton,
      this._handleAfterChangeRadioButton as EventListener
    );
  }

connectedCallback() {
    super.connectedCallback();
    this._instantiateDatePicker();
    // Manually hooks the event listeners on the host element to make the event names configurable
    this._hAfterChange = on(
      this,
      (this.constructor as typeof BXDatePicker).eventAfterChange,
      this._handleChange as EventListener
    );
  }

connectedCallback() {
    super.connectedCallback();
    // Manually hooks the event listeners on the host element to make the event names configurable
    this._hChangePage = on(
      this,
      (this.constructor as typeof BXPagination).eventAfterChangePage,
      this._handleChangePage as EventListener
    );
    this._hChangePageSize = on(
      this,
      (this.constructor as typeof BXPagination).eventAfterChangePageSize,
      this._handleChangePageSize as EventListener
    );
  }

connectedCallback() {
    super.connectedCallback();
    if (!this._throttledHandleMousemoveImpl) {
      this._throttledHandleMousemoveImpl = throttle(this._handleMousemoveImpl, 10);
    }
    // Manually hooks the event listeners on the host element to make the event names configurable
    this._hChangeInput = on(
      this,
      (this.constructor as typeof BXSlider).eventAfterChangeInput,
      this._handleChangeInput as EventListener
    );
  }

constructor(element) {
    super(element);
    this.manage(
      on(element, 'click', event => {
        this.toggle(event);
      })
    );
    const targetElem = element.ownerDocument.querySelector(
      this.options.selectorTarget
    );
    if (targetElem) {
      this.state = InlineLoading.states.ACTIVE;
      this.target = InlineLoading.create(targetElem).setState(this.state);
    }
  }

Object.keys(descriptor).forEach(propName => {
    if (descriptor[propName]) {
      const { event: eventDescriptor } = descriptor[propName];
      const name =
        Object(eventDescriptor) !== eventDescriptor
          ? (eventDescriptor as string)
          : (eventDescriptor as CustomElementEventDescriptor).name;
      const options =
        Object(eventDescriptor) !== eventDescriptor ? undefined : (eventDescriptor as CustomElementEventDescriptor).options;
      if (name) {
        handles.add(
          on(
            elem,
            name,
            event => {
              callback(propName, event);
            },
            options
          )
        );
      }
    }
  });
  return {