Method on

src/gridstack.ts:1320–1346

(name: GridStackEvent | string, callback: GridStackEventHandlerCallback)

  public on(name: 'resizestart' | 'resize' | 'resizestop' | 'dragstart' | 'drag' | 'dragstop', callback: GridStackElementHandler): GridStack
  public on(name: string, callback: GridStackEventHandlerCallback): GridStack
  public on(name: GridStackEvent | string, callback: GridStackEventHandlerCallback): GridStack {
    // check for array of names being passed instead
    if (name.indexOf(' ') !== -1) {
      const names = name.split(' ') as GridStackEvent[];
      names.forEach(name => this.on(name, callback));
      return this;
    }

    // native CustomEvent handlers - cash the generic handlers so we can easily remove
    if (name === 'change' || name === 'added' || name === 'removed' || name === 'enable' || name === 'disable') {
      const noData = (name === 'enable' || name === 'disable');
      if (noData) {
        this._gsEventHandler[name] = (event: Event) => (callback as GridStackEventHandler)(event);
      } else {
        this._gsEventHandler[name] = (event: CustomEvent) => {if (event.detail) (callback as GridStackNodesHandler)(event, event.detail)};
      }
      this.el.addEventListener(name, this._gsEventHandler[name]);
    } else if (name === 'drag' || name === 'dragstart' || name === 'dragstop' || name === 'resizestart' || name === 'resize'
      || name === 'resizestop' || name === 'dropped' || name === 'resizecontent') {
      // drag&drop stop events NEED to be call them AFTER we update node attributes so handle them ourself.
      // do same for start event to make it easier...
      this._gsEventHandler[name] = callback;
    } else {
      console.error('GridStack.on(' + name + ') event not supported');
    }
    return this;
  }

  /**
   * unsubscribe from the 'on' event GridStackEvent