How to use custom-event - 9 common examples

function finishUpAndReturn(callEventListeners=true) {
    const returnValue = getMountedApps();

    if (callEventListeners) {
      callAllEventListeners();
    }
    pendingPromises.forEach(promise => promise.resolve(returnValue));

    try {
      const appChangeEventName = wasNoOp ? "single-spa:no-app-change": "single-spa:app-change";
      window.dispatchEvent(new CustomEvent(appChangeEventName, getCustomEventDetail()));
      window.dispatchEvent(new CustomEvent("single-spa:routing-event", getCustomEventDetail()));
    } catch (err) {
      /* We use a setTimeout because if someone else's event handler throws an error, single-spa
       * needs to carry on. If a listener to the event throws an error, it's their own fault, not
       * single-spa's.
       */
      setTimeout(() => {
        throw err;
      });
    }

    /* Setting this allows for subsequent calls to reroute() to actually perform
     * a reroute instead of just getting queued behind the current reroute call.
     * We want to do this after the mounting/unmounting is done but before we
     * resolve the promise for the `reroute` function.
     */
    appChangeUnderway = false;

function finishUpAndReturn(callEventListeners=true) {
    const returnValue = getMountedApps();

    if (callEventListeners) {
      callAllEventListeners();
    }
    pendingPromises.forEach(promise => promise.resolve(returnValue));

    try {
      const appChangeEventName = wasNoOp ? "single-spa:no-app-change": "single-spa:app-change";
      window.dispatchEvent(new CustomEvent(appChangeEventName, getCustomEventDetail()));
      window.dispatchEvent(new CustomEvent("single-spa:routing-event", getCustomEventDetail()));
    } catch (err) {
      /* We use a setTimeout because if someone else's event handler throws an error, single-spa
       * needs to carry on. If a listener to the event throws an error, it's their own fault, not
       * single-spa's.
       */
      setTimeout(() => {
        throw err;
      });
    }

    /* Setting this allows for subsequent calls to reroute() to actually perform
     * a reroute instead of just getting queued behind the current reroute call.
     * We want to do this after the mounting/unmounting is done but before we
     * resolve the promise for the `reroute` function.
     */

export function contentResized(el) {
  try {
    if (el instanceof HTMLElement) {
      // pass
    } else if (el instanceof React.Component) {
      el = ReactDOM.findDOMNode(el);
    } else {
      return;
    }
    el.dispatchEvent(new CustomEvent(ELEMENT_RESIZE_EVENT, { bubbles: true }));
  } catch (e) {
    // pass
  }
}

_.addClass( elem, "dk-option-selected" );
        elem.setAttribute( "aria-selected", "true" );

        combobox.setAttribute( "aria-activedescendant", elem.id );
        combobox.className = "dk-selected " + option.className;
        combobox.innerHTML = option.innerHTML;

        this.selectedOptions[0] = elem;
        option.selected = true;
      }

      this.selectedIndex = select.selectedIndex;
      this.value = select.value;

      if ( !disabled ) {
        this.data.select.dispatchEvent( new CustomEvent("change", {bubbles: this.data.settings.bubble}));
      }

      return elem;
    }
  }

* Generated On: 2015-10-5
 * Class: ApiGlobe
 * Description: Classe façade pour attaquer les fonctionnalités du code.
 */

import CustomEvent from 'custom-event';
import { ImageryLayers } from '../../../Layer/Layer';
import loadGpx from '../../Providers/GpxUtils';
import Fetcher from '../../Providers/Fetcher';
import CoordStars from '../../../Geographic/CoordStars';
import GlobeView from '../../../Prefab/GlobeView';

export const INITIALIZED_EVENT = 'initialized';

var eventLayerAdded = new CustomEvent('layeradded');
var eventLayerRemoved = new CustomEvent('layerremoved');
var eventLayerChanged = new CustomEvent('layerchanged');
var eventLayerChangedVisible = new CustomEvent('layerchanged:visible');
var eventLayerChangedOpacity = new CustomEvent('layerchanged:opacity');
var eventLayerChangedIndex = new CustomEvent('layerchanged:index');


/**
 * Api
 * @deprecated for the release
 * @constructor
 */
function ApiGlobe() {
    this.scene = null;
    this.viewerDiv = null;
}

}
		} else {
			/*
			We are fading in the new content after the existing content
			disappears. If there isn't any content to fade out, fade it in
			immediately.
			*/

			if (outEl) {
				this.el.appendChild(outEl);
			} else {
				this.el.appendChild(inEl);
			}
		}

		this.el.dispatchEvent(new CustomEvent('content-change'));
	}
}

* Class: ApiGlobe
 * Description: Classe façade pour attaquer les fonctionnalités du code.
 */

import CustomEvent from 'custom-event';
import { ImageryLayers } from '../../../Layer/Layer';
import loadGpx from '../../Providers/GpxUtils';
import Fetcher from '../../Providers/Fetcher';
import CoordStars from '../../../Geographic/CoordStars';
import GlobeView from '../../../Prefab/GlobeView';

export const INITIALIZED_EVENT = 'initialized';

var eventLayerAdded = new CustomEvent('layeradded');
var eventLayerRemoved = new CustomEvent('layerremoved');
var eventLayerChanged = new CustomEvent('layerchanged');
var eventLayerChangedVisible = new CustomEvent('layerchanged:visible');
var eventLayerChangedOpacity = new CustomEvent('layerchanged:opacity');
var eventLayerChangedIndex = new CustomEvent('layerchanged:index');


/**
 * Api
 * @deprecated for the release
 * @constructor
 */
function ApiGlobe() {
    this.scene = null;
    this.viewerDiv = null;
}

ApiGlobe.prototype.constructor = ApiGlobe;

.then(() => {
        appOrParcel.status = MOUNTED;

        if (!firstMountFired) {
          window.dispatchEvent(new CustomEvent('single-spa:first-mount'));
          firstMountFired = true;
        }

        return appOrParcel;
      })
      .catch(err => {

viewerDiv.addEventListener('globe-built', function fn() {
        viewerDiv.removeEventListener('globe-built', fn);
        viewerDiv.dispatchEvent(new CustomEvent(INITIALIZED_EVENT));
    }, false);