Class: Component

Members

staticeg.Component.VERSIONstring

Version info string

버전정보 문자열

Example

eg.Component.VERSION;  // ex) 2.0.0

Methods

hasOn(eventName){boolean}

Component.ts, line 247

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

class Some extends eg.Component {
  some() {
    this.hasOn("hi");// check hi event.
  }
}

off(eventName, handlerToDetach){this}

Component.ts, line 315

Detaches an event from the component.

컴포넌트에 등록된 이벤트를 해제한다

• eventName optional
  Type: string | ...

  The name of the event to be detached

  해제할 이벤트의 이름

• handlerToDetach optional
  Type: function | ...

  The handler function of the event to be detached

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

Returns:

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

Example

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

on(eventName, handlerToAttach){this}

Component.ts, line 271

Attaches an event to a component.

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

• eventName
  Type: string | ...

  The name of the event to be attached

  등록할 이벤트의 이름

• handlerToAttach optional
  Type: function | ...

  The handler function of the event to be attached

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

Returns:

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

Example

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

once(eventName, handlerToAttach){this}

Component.ts, line 213

Executed event just one time.

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

• eventName
  Type: string | ...

  The name of the event to be attached

  등록할 이벤트의 이름

• handlerToAttach optional
  Type: function | ...

  The handler function of the event to be attached

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

Returns:

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

Example

class Some extends eg.Component {
hi() {
  alert("hi");
}
thing() {
  this.once("hi", this.hi);
}

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

trigger(eventName, customEvent, restParam){boolean}

Component.ts, line 154

Triggers a custom event.

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

• eventName
  Type: string | ...

  The name of the custom event to be triggered

  발생할 커스텀 이벤트의 이름

• customEvent
  Type: object | ...

  Event data to be sent when triggering a custom event

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

• restParam
  Type: Array.<any>

  Additional parameters when triggering a custom event

  커스텀 이벤트가 발생할 때 필요시 추가적으로 전달할 데이터

Returns:

Type	Description
boolean	Indicates whether the event has occurred. If the stop() method is called by a custom event handler, it will return false and prevent the event from occurring. Ref 이벤트 발생 여부. 커스텀 이벤트 핸들러에서 stop() 메서드를 호출하면 'false'를 반환하고 이벤트 발생을 중단한다. 참고

Example

class Some extends eg.Component {
  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.
  }
});
some.on("hi", (e) => {
  // `currentTarget` is component instance.
  console.log(some === e.currentTarget); // true
});
// 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