Component

class Component

A class used to manage events in a component

Properties

Methods

VERSIONstatic

trigger
once
hasOn
on
off

Properties

VERSION

static

Version info string

Type: string

Component.VERSION; // ex) 3.0.0

Methods

trigger

Trigger a custom event.

Returns: this

• An instance of the component itself

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
event	string | ComponentEvent			The name of the custom event to be triggered or an instance of the ComponentEvent
params	Array<any> | $ts:...			Event data to be sent when triggering a custom event

import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
  beforeHi: ComponentEvent<{ foo: number; bar: string }>;
  hi: { foo: { a: number; b: boolean } };
  someEvent: (foo: number, bar: string) => void;
  someOtherEvent: void; // When there's no event argument
}> {
  some(){
    if(this.trigger("beforeHi")){ // When event call to stop return false.
      this.trigger("hi");// fire hi event.
    }
  }
}

const some = new Some();
some.on("beforeHi", e => {
  if(condition){
    e.stop(); // When event call to stop, `hi` event not call.
  }
  // `currentTarget` is component instance.
  console.log(some === e.currentTarget); // true

  typeof e.foo; // number
  typeof e.bar; // string
});
some.on("hi", e => {
  typeof e.foo.b; // boolean
});
// If you want to more know event design. You can see article.
// https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F

once

Executed event just one time.

Returns: this

• An instance of the component itself

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
eventName	string | $ts:...			The name of the event to be attached or an event name - event handler mapped object.
handlerToAttach	function | $ts:...	✔️		The handler function of the event to be attached

import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
  hi: ComponentEvent;
}> {
  hi() {
    alert("hi");
  }
  thing() {
    this.once("hi", this.hi);
  }
}

var some = new Some();
some.thing();
some.trigger(new ComponentEvent("hi"));
// fire alert("hi");
some.trigger(new ComponentEvent("hi"));
// Nothing happens

hasOn

Checks whether an event has been attached to a component.

Returns: boolean

• Indicates whether the event is attached.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
eventName	string			The name of the event to be attached

import Component from "@egjs/component";

class Some extends Component<{
  hi: void;
}> {
  some() {
    this.hasOn("hi");// check hi event.
  }
}

on

Attaches an event to a component.

Returns: this

• An instance of a component itself

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
eventName	string | $ts:...			The name of the event to be attached or an event name - event handler mapped object.
handlerToAttach	function | $ts:...	✔️		The handler function of the event to be attached

import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
  hi: void;
}> {
  hi() {
    console.log("hi");
  }
  some() {
    this.on("hi",this.hi); //attach event
  }
}

off

Detaches an event from the component.
If the eventName is not given this will detach all event handlers attached.
If the handlerToDetach is not given, this will detach all event handlers for eventName.

Returns: this

• An instance of a component itself

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
eventName	string | $ts:...	✔️		The name of the event to be detached
handlerToDetach	function | $ts:...	✔️		The handler function of the event to be detached

import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
  hi: void;
}> {
  hi() {
    console.log("hi");
  }
  some() {
    this.off("hi",this.hi); //detach event
  }
}