이벤트 버블링

이벤트가 가장 깊은 요소에서 시작하여 점차 상위 요소들로 전파되는 과정

 

웹 브라우저에서 이벤트를 처리하는 기본 메커니즘

 

각 Div1 , Div2, button 을 클릭했을때 alert이 뜨게 만들어본다.

그 후 제일 안쪽에 있는 button을 클릭하면 button에 대한 alert, Div2에 대한 alert, Div1에 대한 alert이 차례로 뜬다.

이것이 이벤트 버블링.

 

실제 이벤트가 발생한 요소부터 시작해서 트리를 따라 상위 요소들로 전파 됨. 

이 과정은 보통 해당 요소의 부모 요소에서 시작해서 최상위 요소인 body, html에 도달할 때 까지 계속 된다. 

 

장점

• 중복 감소 - 하위 요소에서 발생하는 이벤트를 상위에서 한 번에 처리
• 동적인 요소 처리 - 페이지가 로드된 이후 추가되는 요소에 대해서도 기존 상위 요소 이벤트 리스너가 이벤트 처리
• 메모리 사용 최적화 - 상위 요소에서 이벤트 리스너를 몇 개만 설정 가능
• 이벤트 관리의 단순화 - 이벤트의 흐름을 보다 쉽게 추적 및 관리 가능

위 장점들을 이벤트 위임이라는 단어로 표현할 수 있다.(이벤트 버블링은 이벤트 위임을 구현하기 위해 사용되는 방식)

• 한 개의 부모 요소에 이벤트 리스너를 할당, 그 부모 요소의 자식 요소들에서 발생하는 이벤트를 처리하는 방식
• 이벤트 버블링은 어리한 이벤트 위임을 가능하게 하는 중요한 메커니즘
• 코드를 간결하게 만들고, 메모리 사용 줄이며, 동적으로 요소 추가되거나 변경될 때도 유연하게 대응

target.id를 통해 각 요소를 클릭할때만 alert이 뜨게 구현

원래같으면 div1, div2, button에 각각 addEventListener를 추가해줘야 하는데 이벤트 위임을 통해 div1에만 추가해주면

나머지 div2, button에도 같은 이벤트가 위임된다.

 

그리고 동적으로 DOM 요소가 추가되거나 삭제될때 더 큰 장점이 나타난다.

ex) 버튼을 누르면 li태그의 리스트가 새로 추가되고 그 리스트를 클릭할때 해당 리스트 번호를 가진 alert이 나타난다.

이때 새로 추가된 리스트들에 하나하나 alert을 추가하면 중복과 불필요한 메모리 사용이 일어난다.

그러므로 li태그의 부모 요소인 ul태그에 addEventListener를 한 번만 추가해주면 중복과 메모리 사용 최적화가 모두 관리된다.