Class: Component

Component

new Component()

A class used to manage events in a component

컴포넌트의 이벤트을 관리할 수 있게 하는 클래스

Browser Support

Browser Version
Desktop - Internet Explorer 7+
Desktop - Chrome latest
Desktop - Firefox latest
Desktop - Safari latest
Desktop - Edge latest
iOS 7+
Andorid 2.1+ (except 3.x)

Members

staticComponent.VERSIONstring

Version info string

버전정보 문자열

Example

Component.VERSION; // ex) 3.0.0

Methods

hasOn(eventName){boolean}

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}

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}

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}

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}

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
comments powered by Disqus