Chapter 7

이벤트 다루기

이벤트란?

1. 클릭

2. MouseEvent 객체 생성

3. 이벤트 리스너 실행

function(event){}

• 클릭한 마우스 버튼 정보
• 클릭과 함께 누른 키보드 정보
• 클릭한 마우스 위치 정보

이벤트 종류

• 마우스 이벤트
• 키보드 이벤트
• 태그요소 고유 이벤트(load, change 등)
• 사용자 정의 이벤트

이벤트 단계

1. 캡쳐 단계
2. 타깃 단계
3. 버블링 단계

실행 결과

** eventPhase 프로퍼티 : 이벤트 단계를 알 수 있는 프로퍼티

캡처 단계

- 가장 먼저 실행되는 단계

- document에서 시작해 html, body 태그를 거쳐 실제 이벤트를 발생시킨 B2 노드 전까지 흐르게되며 이 단계를 캡처 단계라 부른다.

- 지나오며 만나는 노드 중 캡처 단계에 이벤트 리스너가 등록돼 있다면 이벤트 리스너가 실행된다.

캡처 단계

- 이벤트 등록 방법

: $대상.get(0).addEventListener(이벤트이름, 리스너, true);

- 캡처 단계 용도

: 타깃/ 버블링 단계의 이벤트 실행 전에 처리해야 할 사전 작업 또는 타깃/버블링 단계 이벤트 처리를 제어하는 용도

타깃 단계

- 이벤트 흐름이 이벤를 발생시킨 노드에 머무르는 단계

- 이벤트를 발생시킨 노드에 이벤트가 등록되어 있다면 리스너가 실행된다.

- 이벤트 등록 방법

: $대상.on(이벤트 이름, 리스너);

버블 단계

- 캡쳐 단계의 역순으로 흐르는 단계

- 이 흐름을 버블링이라 한다.

- B2 노드가 클릭된 경우 이벤트는 캡쳐 단계의 역순인 A2 노드를 시작으로 body, html, document 객체로 흐르게 된다.

- 만나는 노드에 버블 단계의 이벤트가 등록돼 있다면 리스너가 실행된다.

- 이벤트 등록 방법

: $대상.on(이벤트 이름, 리스너);

- 타깃과 버블단계 이벤트 등록 동일

- 타깃과 버블을 구분할 때는 Event 객체의 eventPhase 프로퍼티 사용.

Event 객체

- Event 객체는 이벤트를 발생시키는 곳에서 이벤트와 관련된 정보를 담아 외부로 보낼때 사용 (저장소)

- 웹페이지의 특정 요소를 클릭하면 브라우저는 클릭한 마우스 버튼 정보와 클릭한 위치 정보 그리치 어떤 요소에서 이벤트가 발생했는지에 대한 정보 등을 Event 객체의 자식객체인 MouseEvent 객체에 담아 사용자에게 알려준다.