이벤트 버블링
이벤트 버블링은 특정 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 요소들로 전달되어 가는 특성을 의미한다. 마치 거품이 퍼지는 것 처럼
예시로 3개의 div 태그에 각각의 id를 부여했고 가장 하위 단계의 버튼(id = "children")을 눌렀을 때 모든 addEventListener 가 작동하는 것을 알수있다. button 태그 한 개만 클릭했을 뿐인데 왜 3개의 이벤트가 발생되는 걸까?
- 브라우저가 특정 요소에서 이벤트가 발생했을 때 이벤트를 최상위에 있는 요소까지 전파 시킨다.
- 따라서 children -> parents -> grandParents 순으로 이벤트들이 실행된다. 이와 같이 하위에서 상위 요소로 이벤트가 전파 되는 방식을 Event Bubbling(이벤트 버블링)이라고 한다.
이벤트 캡쳐링
이벤트 캡쳐는 버블링과는 다르게 반대방향으로 진행되는 이벤트 전파 방식이다.
이벤트 캡처는 어떻게 구현할수 있을까?
💡 addEventListener의 매개변수로 true를 추가해 주면 된다.
특정 이벤트가 발생했을 때 버블링과는 반대로 최상위 태그인 body부터 grandParents -> parents -> children 순으로 이벤트가 전파 된다.
이벤트 버블링 & 캡쳐링의 문제점
이벤트 버블링과 캡쳐링은 이벤트가 전파되는 과정에서 원치 않는 동작이 발생할 수 있다. 예를 들어, 원치 않는 이벤트가 중복 실행 된다거나 의도치 않은 상위 요소 이벤트 실행 등이 있다. 그리고 이런 과정에서 이벤트가 충돌 될 가능성도 높다.
Event Delegation(이벤트 위임)
- 이벤트 위임은 상위요소에만 이벤트 리스너를 등록하고, 자식 요소에서 발생하는 이벤트를 부모 요소가 감지하도록 하는 방법이다.
- 위의 코드 처럼 event.target(마우스 포인터가 누른 대상)이 특정 조건을 만족할 때에만 이벤트가 발생하게 하면 불필요한 이벤트가 발생하는 것을 제어할 수 있다.
이벤트 위임의 장점
1. 성능 최적화
- 많은 요소에 이벤트를 각각 등록하면 브라우저의 메모리를 많이 사용하게 되지만 상위요소에 이벤트리스너를 등록하고 하위요소를 제어한다면 성능을 향상시킬수 있다.
2. 동적으로 추가되는 요소도 감지할 수 있다.
- 동적으로 생성되는 요소는 기존 리스너가 감지할 수 없다.
- 하지만 이벤트 위임을 사용하면 새로 추가된 요소도 부모 요소의 이벤트를 통해 감지할 수 있다.
3. 유지보수가 용이하고 흐름 제어가 쉽다.
- 여러 요소에 이벤트를 등록할 필요가 없으니 코드가 짧아지고 변경하기가 쉬워진다. 마찬가지로 변경이나 유지보수가 쉬워진다.
- 조건문을 통해 흐름을 제어하고 다양한 처리를 쉽게할 수 있다.