fromEvent()

fromEvent

이벤트 타겟으로부터 오는 특정한 타입의 이벤트를 방출하는 옵저버블을 만듭니다.

튜토리얼 바로가기

 

fromEvent<T>(target: FromEventTarget<T>, eventName: string, options?: EventListenerOptions | ((...args: any[]) => T), resultSelector?: ((...args: any[]) => T)): Observable<T>

example

fromEvent(target: FromEventTarget<T>, eventName: string): Observable<T>

const clicks = fromEvent(document, 'click');
clicks.subscribe(x => console.log(x));

 

fromEvent(target: FromEventTarget<T>, eventName: string, options: EventListenerOptions): Observable<T>

const clicksInDocument = fromEvent(document, 'click', {
  capture: false,
  once: false,
  passive: false
});

 

const clicksInDocument = fromEvent(document, 'click', true); // note optional configuration parameter

 

fromEvent(target: FromEventTarget<T>, eventName: string, resultSelector: (...args: any[]) => T): Observable<T>

fromEvent(this.$layer, "click", (evt)=>evt.target.closest("li"));

 

fromEvent(target: FromEventTarget<T>, eventName: string, options: EventListenerOptions, resultSelector: (...args: any[]) => T): Observable<T>

 

세번째 파라미터의 경우 들어오는 타입에 따라 fromEvent 가 다르게 인식합니다.

- 함수인 경우는 EventListenerOptions로 인식

- 객체인 경우는 EventListener 옵션으로 인식

 

EventListenerOptions

addEventListener의 3번째 자리에 캡처링 버블링 여부를 제어하는 옵션을 줄 수 있습니다.

객체형태로 추가옵션을 넣을 수 있는데, 이 객체형태의 옵션이 EventListenerOptions입니다.

 

EventListenerOptions 사용 전

document.addEventListener('touchstart', handler, false);

 

EventListenerOptions 사용 후

document.addEventListener("touchstart", handler, {
  capture: false,
  once: false,
  passive: false
});

 

EventListenerOptions에 대해 자세히 알아볼 수 있는 사이트 바로가기

EventListenerOptions/explainer.md 바로가기

 

[참고]

- RxJS 퀵스타트 서적

- 하이퍼링크들