유저의 입력을 받기 위해 꼭 필요한 기능인 이벤트 등록에 대해서 알아보자 !
이벤트 등록을 하기 위해서 보통 addEventListener() 사용한다.
사용자의 입력에 따라 추가 동작을 구현할 수 있다.
여기서 브라우저는 어떻게 이벤트 발생을 감지했을까 ?
두 가지 방식을 알아보자.
1. 이벤트 버블링(Event Bubbling)
이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때
해당 이벤트 더 상위 화면 요소들로 전달되어 가는 특성을 의미한다.
** 하위 클릭 이벤트 --> 상위 클릭 이벤트 **
브라우저는 특정 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시킨다.
무조건 최상위에 있는 화면 요소까지 이벤트를 전파시키는 것이 아니라
이벤트가 등록되어 있는 요소만 전파가 된다.
이벤트가 특정 태그에만 등록되어 있다면 이벤트 버블링 현상은 일어나지 않는다.
요약: 하위에서 상위 요소로의 이벤트 전파 방식을 이벤트 버블링
(Event Bubbling) 이라고 한다.
HTML 요소는 기본적으로 트리 구조를 갖는다.
HTML 트리 구조의 예시를 위한 이미지이다.
2. 이벤트 캡쳐링(Event Capturing)
이벤트 캡쳐링은 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식이다.
** 상위 클릭 이벤트 --> 하위 클릭 이벤트 **
요약: 상위에서 하위 요소로의 이벤트 전파 방식을 이벤트 버블링
(Event Bubbling) 이라고 한다.
3. event.stopPropagation()
여기서 이벤트 버블링, 이벤트 캡쳐링 현상을 막고 싶다면
event.stopPropagation(); 을 사용하면 된다.
만약 이벤트 버블링의 경우,
클릭한 요소의 이벤트만 발생시키고 상위 요소로 이벤트를 전파하는 것을 막는다.
그리고 이벤트 캡쳐링의 경우,
클릭한 최상위 요소의 이벤트만 동작시키고 하위 요소로 이벤트를 전파하는 것을 막는다.
4. 이벤트 위임
'하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식'
