Component

class Component

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

Properties

Methods

VERSIONstatic

trigger
once
hasOn
on
off

Properties

VERSION

static

버전정보 문자열

Type: string

Component.VERSION; // ex) 3.0.0

Methods

trigger

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

Returns: this

• 컴포넌트 자신의 인스턴스

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
event	string | ComponentEvent			발생할 커스텀 이벤트의 이름 또는 ComponentEvent의 인스턴스
params	Array<any> | $ts:...			커스텀 이벤트가 발생할 때 전달할 데이터

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

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

Returns: this

• 컴포넌트 자신의 인스턴스

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
eventName	string | $ts:...			등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트
handlerToAttach	function | $ts:...	✔️		등록할 이벤트의 핸들러 함수

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

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

Returns: boolean

• 이벤트 등록 여부

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
eventName	string			등록 여부를 확인할 이벤트의 이름

import Component from "@egjs/component";

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

on

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

Returns: this

• 컴포넌트 자신의 인스턴스

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
eventName	string | $ts:...			등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트
handlerToAttach	function | $ts:...	✔️		등록할 이벤트의 핸들러 함수

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

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

Returns: this

• 컴포넌트 자신의 인스턴스

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
eventName	string | $ts:...	✔️		해제할 이벤트의 이름
handlerToDetach	function | $ts:...	✔️		해제할 이벤트의 핸들러 함수

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

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