[JavaScript] 이벤트 버블링, 캡쳐

해당 글은 개인적인 공부를 위해 기록하는 글입니다.

이벤트 버블링

이벤트 버블링과 캡쳐링에 대해서 배웠으나 자꾸 까먹어서 기록해 놓으려 한다.

 

1. 이벤트

1) 이벤트 이해하기, 종류들

- 모든 노드 요소는 이벤트 타켓을 상속하므로 즉 모든 요소에는 이벤트 등록이 가능하다,
- 이벤트에는 세가지 메소드가 있는데 에드이벤리스너, 리무브이벤리스너, 디스패치이벤트
- 디스패치는 이벤트를 인위적으로 만들 수 있는 녀석

 

2) 이벤트 버블링

-JS에는 이벤트 버블링이 존재하는데, 버블 영어 그대로 거품이라는 의미다, 물방울이 아래에서 위로 올라가는 이미지는 생각해보자, 한 요소에 이벤트가 발생 시 요소에 할당된 이벤트 핸들러가 동작하고 뒤이어 부모 요소 이벤트 핸들러가 동작한다, 가장 최상단의 요소를 만날 때까지 이 과정이 반복된다

 HTML은 기본적으로 트리 구조를 갖기 때문에 한 단계 위에 요소를 상위 요소 === 부모 요소라고 부른다

- 따라서 가장 상위 요소 에서는 하위요소에서 발생한 이벤트를 알아차릴 수 있다.

 

3) 이벤트 캡쳐링

- 이벤트 캡쳐링은 이벤트가 상위 요소에서 하위 요소로 전파되는 단계

- 캡쳐링은 자주 쓰이지는 않지만 유용

 

4) event.target vs event.currentTarget

- event.target은 사용자가 최초로 이벤트를 발생시킨 요소를 가르키게 된다 

- event.currenTarget은 이벤트가 버블링되어서 최종상단에서 인식하게 된 요소를 가르키게됨