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.
컴포넌트에 이벤트가 등록됐는지 확인한다.
-
eventNameType: 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 theeventName
is not given this will detach all event handlers attached.
If thehandlerToDetach
is not given, this will detach all event handlers foreventName
.컴포넌트에 등록된 이벤트를 해제한다.
eventName
이 주어지지 않았을 경우 모든 이벤트 핸들러를 제거한다.handlerToAttach
가 주어지지 않았을 경우eventName
에 해당하는 모든 이벤트 핸들러를 제거한다.-
eventName optional nullableType: string | ...
The name of the event to be detached
해제할 이벤트의 이름
-
handlerToDetach optional nullableType: 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.
컴포넌트에 이벤트를 등록한다.
-
eventNameType: string | ...
The name of the event to be attached or an event name - event handler mapped object.
등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트
-
handlerToAttach optionalType: 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.
이벤트가 한번만 실행된다.
-
eventNameType: string | ...
The name of the event to be attached or an event name - event handler mapped object.
등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트
-
handlerToAttach optionalType: 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.
커스텀 이벤트를 발생시킨다
-
eventType: string | ComponentEvent
The name of the custom event to be triggered or an instance of the ComponentEvent
발생할 커스텀 이벤트의 이름 또는 ComponentEvent의 인스턴스
-
params repeatableType: 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
-