How To - Events

Event Constants

Event names are defined at EVENTS.

import { EVENTS } from "@egjs/view360";

EVENTS.READY // = "ready"
EVENTS.VIEW_CHANGE // = "viewChange"

How to add event handlers

You can add event handlers in View360 in two main ways.

With option "on"

The on option automatically adds an event handler at the time of instance creation in View360.

import View360, { EVENTS } from "@egjs/view360";

// The event handler is added at this point.
const view360 = new View360("#el_id", {
  on: {
    [EVENTS.READY]: evt => {
      console.log("View360 is Ready!");
    },
    // You can add multiple event handlers.
    // However, only one handler can be added as an option for an event.
    [EVENTS.VIEW_CHANGE]: evt => {
      console.log("View360's view direction is changed.");
    }
  }
});

With method "on"

You can use the on method to add event handlers to View 360 at any time.

import View360, { EVENTS } from "@egjs/view360";

const view360 = new View360("#el_id");

view360.on(EVENTS.READY, evt => {
  console.log("READY!")
});

There is method once as a variation.
Event handlers that you add with once are only triggered once before being removed from the event handlers list.

import View360, { EVENTS } from "@egjs/view360";

const view360 = new View360("#el_id");

view360.once(EVENTS.RENDER, evt => {
  console.log("This will be logged once after the first render");
});

Removing event handlers

off lets you remove pre-registered event handlers.
There are three ways to use it, as follows.

Remove a single event handler

You can provide the event name and handler as parameters.

import { EVENTS, ViewChangeEvent } from "@egjs/view360";
const onViewChange = (evt: ViewChangeEvent) => {};

view360.on(EVENTS.VIEW_CHANGE, onViewChange);

// Remove only "onViewChange" from the event handler list.
view360.off(EVENTS.VIEW_CHANGE, onViewChange);

Remove all event handlers for a particular event

You only need to provide the event name as a parameter.

// All event handlers for viewChange events are removed.
view360.off("viewChange");

Remove all event handlers

You can call off without any parameters.

// All event handlers are removed.
view360.off();