[JavaScript] 버블링과 캡쳐링 (Bubbling & Capturing)

이벤트 버블링

이벤트 버블링은 어떤 요소에 이벤트가 발생했을때 해당요소의 이벤트만 실행시키고 싶어도 그 요소가 속한 부모요소에 까지 이벤트가 전파되어 전부 다 실행되어지는 것을 말한다.

이벤트 캡쳐링

이벤트 캡쳐링은 어떤 요소에 이벤트가 발생했을때 최상위 부모로부터 이벤트가 발생된 요소까지 이벤트가 전달되어 지는 과정을 말한다. 이벤트 캡쳐링을 위해서는 addEventListener의 세번째 인자를 true로 설정하면 된다. 아예 쓰지 않거나 false로 설정한다면 이벤트 버블링이 자동적으로 실행된다.

방지하는 방법

비추천

1. e.stopPropagation()
2. e.stopImmediatePropagation()

위의 방법으로 이벤트 버블링을 막을 수 있으나 다른 중요 이벤트를 무시하게 될수도 있으므로 권장하는 방법은 아니다. 프로젝트의 규모가 커졌을때 해당 이유로 예상치못한 오류가 발생할수도 있다.

추천

따라서 이벤트의 전파를 막고싶은 부모요소에 아래와 같은 코드를 넣어주는게 좋다.

if(e.target !== e.currentTarget) {
return;
}

이벤트에 있는 target과 currentTarget이 똑같지 않으면 리턴 하지 않는 것이다. 그러면 모든 이벤트를 무시하지 않고 관심있는 target 일때만 이벤트를 처리할 수 있다.

참조

DreamCoding