Component

Component

A class used to manage events in a component

Constructor

new Component()

Source:

Members

(static) VERSION: String

Source:
Version info string
Type:
  • String
Example
eg.Component.VERSION;  // ex) 2.0.0

Methods

hasOn(eventName) → {Boolean}

Source:
Checks whether an event has been attached to a component.
Name Type Description
eventName String The name of the event to be attached 등록 여부를 확인할 이벤트의 이름
Example
class Some extends eg.Component {
  some() {
    this.hasOn("hi");// check hi event.
  }
}
Returns:
Indicates whether the event is attached. 이벤트 등록 여부
Type
Boolean

off(eventName, handlerToDetach) → {eg.Component}

Source:
Detaches an event from the component.
Name Type Description
eventName eventName The name of the event to be detached 해제할 이벤트의 이름
handlerToDetach function The handler function of the event to be detached 해제할 이벤트의 핸들러 함수
Example
class Some extends eg.Component {
  hi() {
    console.log("hi");
  }
  some() {
    this.off("hi",this.hi); //detach event
  }
}
Returns:
An instance of a component itself 컴포넌트 자신의 인스턴스
Type
eg.Component

on(eventName, handlerToAttach) → {eg.Component}

Source:
Attaches an event to a component.
Name Type Description
eventName eventName The name of the event to be attached 등록할 이벤트의 이름
handlerToAttach function The handler function of the event to be attached 등록할 이벤트의 핸들러 함수
Example
class Some extends eg.Component {
  hi() {
    console.log("hi");
  }
  some() {
    this.on("hi",this.hi); //attach event
  }
}
Returns:
An instance of a component itself컴포넌트 자신의 인스턴스
Type
eg.Component

once(eventName, handlerToAttach) → {eg.Component}

Source:
Executed event just one time.
Name Type Description
eventName eventName The name of the event to be attached 등록할 이벤트의 이름
handlerToAttach function The handler function of the event to be attached 등록할 이벤트의 핸들러 함수
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
Returns:
An instance of a component itself컴포넌트 자신의 인스턴스
Type
eg.Component

trigger(eventName, customEventopt, ...restParam) → {Boolean}

Source:
Triggers a custom event.
Name Type Default Description
eventName String The name of the custom event to be triggered 발생할 커스텀 이벤트의 이름
customEvent? Object {} Event data to be sent when triggering a custom event 커스텀 이벤트가 발생할 때 전달할 데이터
...restParam
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
Returns:
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'를 반환하고 이벤트 발생을 중단한다. 참고
Type
Boolean