Chapter 7
이벤트 다루기
이벤트란?
1. 클릭
2. MouseEvent 객체 생성
3. 이벤트 리스너 실행
function(event){}
- 클릭한 마우스 버튼 정보
- 클릭과 함께 누른 키보드 정보
- 클릭한 마우스 위치 정보
이벤트 종류
- 마우스 이벤트
- 키보드 이벤트
- 태그요소 고유 이벤트(load, change 등)
- 사용자 정의 이벤트
이벤트 단계
- 캡쳐 단계
- 타깃 단계
- 버블링 단계
실행 결과
| 실행 내용 | 이벤트 단계 |
| 01. document phase=1 count=1 | 캡처 단계 |
| 02. body phase=1 count=2 | 캡처 단계 |
| 05. A2 phase=1 count=3 | 캡처 단계 |
| 16. B2 phase=2 count=4 | 타깃 단계 |
| 15. A2 phase=3 count=5 | 버블 단계 |
| 12. body phase=3 count=6 | 버블 단계 |
| 11. document phase=3 count=7 | 버블 단계 |
** eventPhase 프로퍼티 : 이벤트 단계를 알 수 있는 프로퍼티
캡처 단계
- 가장 먼저 실행되는 단계
- document에서 시작해 html, body 태그를 거쳐 실제 이벤트를 발생시킨 B2 노드 전까지 흐르게되며 이 단계를 캡처 단계라 부른다.
- 지나오며 만나는 노드 중 캡처 단계에 이벤트 리스너가 등록돼 있다면 이벤트 리스너가 실행된다.
캡처 단계
- 이벤트 등록 방법
: $대상.get(0).addEventListener(이벤트이름, 리스너, true);
- 캡처 단계 용도
: 타깃/ 버블링 단계의 이벤트 실행 전에 처리해야 할 사전 작업 또는 타깃/버블링 단계 이벤트 처리를 제어하는 용도
타깃 단계
- 이벤트 흐름이 이벤를 발생시킨 노드에 머무르는 단계
- 이벤트를 발생시킨 노드에 이벤트가 등록되어 있다면 리스너가 실행된다.
- 이벤트 등록 방법
: $대상.on(이벤트 이름, 리스너);
버블 단계
- 캡쳐 단계의 역순으로 흐르는 단계
- 이 흐름을 버블링이라 한다.
- B2 노드가 클릭된 경우 이벤트는 캡쳐 단계의 역순인 A2 노드를 시작으로 body, html, document 객체로 흐르게 된다.
- 만나는 노드에 버블 단계의 이벤트가 등록돼 있다면 리스너가 실행된다.
- 이벤트 등록 방법
: $대상.on(이벤트 이름, 리스너);
- 타깃과 버블단계 이벤트 등록 동일
- 타깃과 버블을 구분할 때는 Event 객체의 eventPhase 프로퍼티 사용.
Event 객체
- Event 객체는 이벤트를 발생시키는 곳에서 이벤트와 관련된 정보를 담아 외부로 보낼때 사용 (저장소)
- 웹페이지의 특정 요소를 클릭하면 브라우저는 클릭한 마우스 버튼 정보와 클릭한 위치 정보 그리치 어떤 요소에서 이벤트가 발생했는지에 대한 정보 등을 Event 객체의 자식객체인 MouseEvent 객체에 담아 사용자에게 알려준다.