😲 시작하기에 앞서
드림코딩 엘리님의 브라우저강의중 이벤트 캡쳐링과 버블링의 개념, 이해를 복습하였고 이에 따른 내용 정리를 포스팅하려고한다.
1.캡쳐링과 버블링
자바스크립트는 이벤트가 발생하면 이벤트가
발생한 노드(Event Target)를 찾기 위해 DOM트리를 탐색한다.
탐색 과정은 document루트 또는
가장 바깥쪽 노드에서부터 이벤트가 트리거 된 타겟 노드까지 내려가는
탐색 방식과,
반대 방향으로 다시 올라오는 탐색 방식으로 구분된다. 여기서
타겟 노드까지 내려가는 탐색 방식을 이벤트 캡쳐링(Event Capturing)
반대 방향으로 최상위 노드까지 올라오는 방식을 이벤트 버블링(Event Bubbling)
이라고 하며 이렇게 이벤트가 이벤트까지, 최상위 노드까지 도달하기 위해 퍼져 나가는 것을 이벤트 전파(Event Propagation)라고 한다.
자바스크립트의 이벤트 리스너 등록 및 처리는 기본적으로 버블링 과정을 통해 전파되기 때문에 캡처링 과정으로 이벤트를 전파하고 싶은 경우 이벤트 리스너 등록시 capture 옵션을 true로 설정해주면된다.
target.addEventListener('이벤트', 콜백 함수, {capture:ture});
target.addEventListener('이벤트', 콜백 함수, true);
위 예시와 같이 옵션을 지정하면 이벤트 캡쳐링 방식으로 이벤트를 전파한다.
이벤트 전파를 원하지 않을 경우에 event.stopPropagation();
메서드를 타겟 엘리먼트의 이벤트 콜백 함수 마지막 위치에서 호출하면된다.
2. 캡쳐링과 버블링 비교
위와 같은 구조에서 아이템을 클릭했을 때 이벤트가 어떻게 전파되는지 확인해보자. 캡쳐링과 버블링은 아래와 같은 방향으로 전파된다.
"eventPropagation(true)"를 호출하면 이벤트 캡쳐링이 되면서
최상위 document루트에서 하위 요소로 이벤트가 전파되고
"eventPropagation(false)"를 호출하면 맨 밑 타겟 span태그에서 위로 이벤트가 버블링 된다.
