[Javascript] 자바스크립트 이벤트(버블링? 캡쳐링? 위임?)

 

🌐 이벤트 버블링과 캡쳐링 

출처 https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B2%84%EB%B8%94%EB%A7%81-%EC%BA%A1%EC%B3%90%EB%A7%81

 

자바스크립트에서 이벤트는 DOM 트리를 따라 위아래로 퍼져나가게 된다.

2번째 그림과 같이 DOM이 팬케이크처럼 겹쳐져있다고 생각하면 이해가 편한데,
가장 아래의 div2를 누르면 그 위에 있는 html, body, div1까지 모두 눌리게 되는 것이다. 누르면서 위에서부터 하나씩 다 눌리게되고,
div2에서 누른게 떨어지면 그대로 아래부터 한 번 더 요소들을 건드리게되면서 버블링이 일어난다.. 고 이해하면 편할 것 같다.

 

이벤트가 상위요소에서 하위요소로 전파되는 것을 `캡쳐링`,
반대로 하위요소에서 상위요소로 전파되는 것을 `버블링`이라고 한다

자바스크립트에서 기본적으로 `캡쳐링`단계가 일어난 뒤 `타겟에 등록된 이벤트`가 일어나고, `버블링`이 일어나게 된다. (그림2)

! 거의 대부분의 이벤트는 이런 방식으로 작동하지만, 모든 이벤트에서 버블링이 일어나는 것은 아니다 (focus는 버블링 x)
! 캡처링은 IE8 이하에서 지원되지 않는다.

하지만 기본적으로 캡쳐링은 false로 설정되어 있기 때문에 만약 캡쳐링이 필요할 경우 addEventListener의 3번째 인자를 true로 설정을 해주어야 캡쳐링이 일어나게 된다. (아래 그림 참조)

출처 https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B2%84%EB%B8%94%EB%A7%81-%EC%BA%A1%EC%B3%90%EB%A7%81

그리고 만약 이런 이벤트 전파를 막고싶다면, `e.stopPropagation()`을 설정해주어 막을 수 있다.
그렇지만 필요한 상황이 아니라면 권장되지 않고, (행동패턴 분석 등에서 문제를 일으킬 수 있다. 죽은 영역(dead zone)을 발생시키기 때문에)
이벤트 버블링을 적절히 이용하는 것이 좋다. 또는 커스텀이벤트를 이용해 이를 해결할 수 있다.

! `stopImmediatePropagation()`를 통해 이벤트 전파를 막으면서 동시에 형제 이벤트 실행을 중지할 수 있다.
! `e.preventDefault()` 를 통해 이벤트 기본동작을 중지하면, 이벤트 전파 중지 + 형제 이벤트 실행 중지가 같이 일어난다

 

 

 

이러한 이벤트 버블링과 캡쳐링은 `이벤트위임`에 기본 개념이 되기에 굉장히 중요한데,

📚 이벤트 위임 (event delegation)

이벤트 위임은 자식 요소의 이벤트를 상위 부모 요소에서 한번에 처리하는 강력한 이벤트 핸들링 패턴이다.

공통되는 상위부모 요소에서 이벤트를 한번만 걸어주는 방식으로 하위 요소들에게 이벤트핸들러를 등록하므로
중복되는 코드 작성을 줄이고, 
동적으로 생성되는 요소들에 대해서도 이벤트핸들러를 등록해줄 수 있게 된다.