2021-10-15 노션페이지,
2021-10-16 노션페이지,
2021-10-17 노션페이지,
2021-12-08 노션페이지
기록된 노션을 다시 정리
어려웠던 부분
- 버블링, 캡처링의 이해
- 실제 사용 예시
1. 이벤트 핸들러
이벤트가 발생하면 그에 맞는 반응을 해야한다. 이를 위해 이벤트에 함수를 연결하여 이벤트가 발생될 때 연결한 함수가 실행된다. 이때 연결한 함수를 이벤트 핸들러라 한다.
2. 이벤트 루프와 동시성
자바스크립트의 동시성(Concurrency)을 지원하는 것이 바로
이벤트 루프(Event Loop)이다.
- Call Stack
- 작업이 요청되면 요청된 작업은 순차적으로 Call Stack에 쌓이게 되고 순차적으로 실행된다. (단 하나의 Call Stack만 사용)
- Heap
- 동적으로 생성된 객체 인스턴스가 할당되는 영역
비동기 처리
- Event Queue(Task Queue)
- 비동기 처리 함수의 콜백 함수, 비동기식 이벤트 핸들러 등의 보관영역
=> Call Stack이 비워질 경우 순차적으로 이동여러 Queue들에 우선순위를 부여해 어떤 task를 먼저 수행할지 결정
- Task Queue(Macrotask Queue)
- setTimeout(), setInterval(), setImmediate()와 같은 task를 넘겨받는다.
- Microtask Queue
- Promise나 async/await 같은 비동기 호출을 넘겨받는다.
- Event Loop(이벤트 루프)
Call Stack 내에서 현재 실행중인 task가 있는지 그리고 Event Queue에 task가 있는지 반복하여 확인한다.
3. 이벤트 핸들러 등록
- 인라인 이벤트 핸들러 방식
- HTML 요소의 이벤트 핸들러 어트리뷰트에 이벤트 핸들러를 등록하는 방법이다.
=> 이 방식은 더 이상 사용되지 않으며 사용해서도 않된다.- 이벤트 핸들러 프로퍼티 방식
- 이벤트 핸들러 프로퍼티에 이벤트 핸들러를 바인딩
=> 하나의 이벤트 핸들러만을 바인딩할 수 있다는 단점- addEventListener 메소드 방식
- 이전 방식에 비해 아래와 같이 보다 나은 장점을 갖는다.
- 하나의 이벤트에 대해 하나 이상의 이벤트 핸들러를 추가할 수 있다.
- 캡처링과 버블링을 지원한다.
4. 이벤트 핸들러 함수 내부의 this
- 인라인 이벤트 핸들러 방식
- this는 전역 객체 window를 가리킨다.
- 이벤트 핸들러 프로퍼티 방식
- this는 이벤트에 바인딩된 요소
- addEventListener 메소드 방식
- this는 이벤트 리스너에 바인딩된 요소
!! 원래 콜백함수의 this는 window를 가르킨다 (내부함수 또한 window)
5. 이벤트의 흐름
- 버블링
- 이벤트가 부모 요소로 전파되는 것을 버블링
- 캡처링
- 자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 이벤트를 발생시킨 자식 요소!! 주의할 것은 버블링과 캡처링은 둘 중에 하나만 발생하는 것이 아니라 캡처링부터 시작하여 버블링으로 종료한다는 것이다.
6. Event 객체
이벤트요소와 발생한 이벤트에 대한 정보이며 생성되어 이벤트 핸들러의 인자로 작용함
이때 이벤트핸들러의 매개변수를 명시해야 하는데 대부분 e로 한다.
7. Event Delegation (이벤트 위임)
- 동적으로 요소가 추가되는 경우, 아직 추가되지 않은 요소는 DOM에 존재하지 않으므로 이벤트 핸들러를 바인딩할 수 없다.
이때, 하나의 부모 요소에 이벤트 핸들러를 바인딩하는 방법이다.
8. 기본 동작의 변경
- Event.preventDefault()
- 태그의 기본으로 설정되어 있는 이벤트를 중단
- Event.stopPropagation()
- 캡처링, 버블링을 원하는 곳에서 스탑 하는 기능
참조 : poiemaweb.com
