이벤트 캡쳐링,버블링과 이벤트 위임
2023-10-03
버블링
한 요소에 이벤트가 발생하면 최상단 조상 요소를 만날 때까지 이벤트가 위로 전파되는 현상
아래 예시코드를 실행하면 1번!, 2번! alert 창이 차례로 뜬다. button 요소에 발생한 이벤트가 body까지 위로 전파된 것이다.
이벤트가 전파되지 않게 막고 싶다면 stopPropagation을 활용할 수 있다.
캡쳐링
이벤트가 최상위 조상에서 시작해 아래로 전파되는 현상
우리가 자주 쓰는 addEventListener의 capture 옵션을 줘서 캡쳐링 단계에서 이벤트를 잡아낼 수 있다. removeEventListener로 이벤트를 지울 때도 capture 옵션을 똑같이 줘야 한다.
이벤트 위임
캡쳐링과 버블링을 활용해 이벤트 위임을 구현할 수 있다.
요소마다 이벤트 핸들러를 할당하지 않고 요소의 공통 조상에 이벤트 핸들러를 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다.
아래 아이템 목록에서 li태그 영역을 클릭했을 때 콘솔을 찍는 코드를 만들어보자
간단하게 생각해서 li태그에 해당하는 요소를 모두 불러오고 이를 순회하면서 이벤트 핸들러를 붙여줄 수 있다.
이렇게 되면 추가 버튼을 추가하고 버튼을 클릭했을 때 wrap_list안의 li태그를 새로 추가할 때마다 새로 이벤트 핸들러를 붙여줘야 한다. 동적으로 이벤트를 핸들링하는 게 어려워진다.
버블링을 활용해 이벤트를 위임해보자. wrap_list 요소 (ul 태그)에 이벤트 핸들러를 붙이면 li 태그 영역이 클릭되었을 때도 같은 효과를 볼 수 있다.