일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- error
- border-width
- angular
- rxjs
- Git
- oh-my-zsh
- 테두리굵기
- change detection
- 이미지바꾸기
- code .
- sealize
- zsh
- ChangeDetectorRef
- Ionic
- IONIC3
- fromEvent
- NVM
- aab 배포
- VSCode
- 변화감지
- getElementsByClassName
- typescript
- php
- Visual Studio Code
- ion-range
- angular5
- 자바스크립개념
- Sentry
- hashchange
- JavaScript
- Today
- Total
hsunny study blog
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>
1
2
|
const clicks = fromEvent(document, 'click');
clicks.subscribe(x => console.log(x));
|
1
2
3
4
5
|
const clicksInDocument = fromEvent(document, 'click', {
capture: false,
once: false,
passive: false
});
|
1
|
const clicksInDocument = fromEvent(document, 'click', true); // note optional configuration parameter
|
↑ 캡쳐옵션 준 것
fromEvent(target: FromEventTarget<T>, eventName: string, resultSelector: (...args: any[]) => T): Observable<T>
1
|
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 사용 전
1
|
document.addEventListener('touchstart', handler, false);
|
EventListenerOptions 사용 후
1
2
3
4
5
|
document.addEventListener("touchstart", handler, {
capture: false,
once: false,
passive: false
});
|
EventListenerOptions에 대해 자세히 알아볼 수 있는 사이트 바로가기
EventListenerOptions/explainer.md 바로가기
[참고]
- RxJS 퀵스타트 서적
- 하이퍼링크들
'programming > RxJS' 카테고리의 다른 글
toPromise? firstValueFrom? lastValueFrom? (0) | 2023.02.04 |
---|---|
forkjoin 마이그레이션 (0) | 2021.07.09 |
데이터 가공해서 출력하기 (pluck operator) (0) | 2019.07.12 |
RxJS를 이용하여 HTTP 통신 개선하기 (0) | 2019.05.27 |