Class: Component

Members

staticComponent.VERSIONstring

Version info string

버전정보 문자열

Example

Component.VERSION;  // ex) 3.0.0

Methods

hasOn(eventName){boolean}

Component.ts, line 175

Checks whether an event has been attached to a component.

컴포넌트에 이벤트가 등록됐는지 확인한다.

• eventName
  Type: string

  The name of the event to be attached

  등록 여부를 확인할 이벤트의 이름

Returns:

Type	Description
boolean	Indicates whether the event is attached. 이벤트 등록 여부

Example

import Component from "@egjs/component";

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

off(eventName, handlerToDetach){this}

Component.ts, line 251

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.

컴포넌트에 등록된 이벤트를 해제한다.
eventName이 주어지지 않았을 경우 모든 이벤트 핸들러를 제거한다.
handlerToAttach가 주어지지 않았을 경우 eventName에 해당하는 모든 이벤트 핸들러를 제거한다.

• eventName optional nullable
  Type: string | ...

  The name of the event to be detached

  해제할 이벤트의 이름

• handlerToDetach optional nullable
  Type: function | ...

  The handler function of the event to be detached

  해제할 이벤트의 핸들러 함수

Returns:

Type	Description
this	An instance of a component itself 컴포넌트 자신의 인스턴스

Example

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

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

on(eventName, handlerToAttach){this}

Component.ts, line 203

Attaches an event to a component.

컴포넌트에 이벤트를 등록한다.

• eventName
  Type: string | ...

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

  등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트

• handlerToAttach optional
  Type: function | ...

  The handler function of the event to be attached

  등록할 이벤트의 핸들러 함수

Returns:

Type	Description
this	An instance of a component itself 컴포넌트 자신의 인스턴스

Example

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

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

once(eventName, handlerToAttach){this}

Component.ts, line 136

Executed event just one time.

이벤트가 한번만 실행된다.

• eventName
  Type: string | ...

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

  등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트

• handlerToAttach optional
  Type: function | ...

  The handler function of the event to be attached

  등록할 이벤트의 핸들러 함수

Returns:

Type	Description
this	An instance of the component itself 컴포넌트 자신의 인스턴스

Example

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

trigger(event, params){this}

Component.ts, line 78

Trigger a custom event.

커스텀 이벤트를 발생시킨다

• event
  Type: string | ComponentEvent

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

  발생할 커스텀 이벤트의 이름 또는 ComponentEvent의 인스턴스

• params repeatable
  Type: Array.<any> | ...

  Event data to be sent when triggering a custom event

  커스텀 이벤트가 발생할 때 전달할 데이터

Returns:

Type	Description
this	An instance of the component itself 컴포넌트 자신의 인스턴스

Example

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