Skip to main content
Version: 4.9.0

Component

class Component

A class used to manage events in a component

Properties
Methods

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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventstring | ComponentEvent

The name of the custom event to be triggered or an instance of the ComponentEvent

paramsArray<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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...

The name of the event to be attached or an event name - event handler mapped object.

handlerToAttachfunction | $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.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring

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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...

The name of the event to be attached or an event name - event handler mapped object.

handlerToAttachfunction | $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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...✔️

The name of the event to be detached

handlerToDetachfunction | $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
}
}