Day76 - [js]버블링 vs 캡쳐링

이번에는 java script 의 이벤트위임 의 원리 인 버블링 과 그에 반대인 캡쳐링 을 알아 봅시다.

 

버블링 vs 캡쳐링

버블링과 캡쳐링은 하나의 특성이라고 생각을 하면 될 것 같습니다.

 

java script 에서 이벤트가 발생되는 곳을 확인 하기 위해서, 캡쳐링을 수행하고, target 을 발견하면, 버블링을 수행합니다.

 

즉. 이벤트를 실행하기 위해서, 어떤 이벤트가 실행되는지 알아보려고 캡쳐링을 수행 합니다.

이 때, 부모 노드부터 차례대로 내려오면서 이벤트를 실행합니다. window -> document -> html -> body -> ....

이를 캡쳐링 이라고 합니다.

 

이제, evnet.target 을 발견(어떤 이벤트가 실행되는지 찾음) 하면, 내려가는 걸 멈추고, 다시 window 에 event.target 이 어떤건지 차례대로 올라가면서 이벤트를 실행합니다.  .... -> body -> html -> document -> window

이를 버블링 이라고 합니다.

 

그런데, 캡쳐링을 하면서도 이벤트를 실행하고, 버블링을 하면서도 이벤트를 실행하면, 이벤트가 2번 실행이 됩니다.

그러면, 누가봐도 이상하게 작동을 한다는 것을 알죠?

그래서, 캡쳐링을 하면서 이벤트를 실행하는 방식은 생략이 되어 있습니다.

 

기본적으로, 이벤트를 걸어주면, 버블링 이 기본값으로 걸려 있습니다.

 

버블링

빨간색 영역 -> 파란색 영역 -> 초록색 영역 순으로 이루어져 있는 곳에서, (부모 -> 자식)

위와 같이 작동하는 코드를 짜게 되었을 때 초록색 영역을 실행하면,

초록색 영역 -> 파란색 영역 -> 빨간색 영역 순으로 이벤트가 전부 실행이 됩니다.

 

즉. 최상위 부모의 영역(빨간색) 안에, 중간 부모의 영역(파란색) 안에, 자식 영역(초록색) 이 있죠?

공간적 개념으로 생각을 해보면, 빨간색 안에 파란색 안에 초록색 .

 

그래서, 초록색 영역을 클릭했을 때, 이는 파란색 영역 안에도 있고, 빨간색 영역 안에도 있는거죠?

그런데, 버블링은 가장 깊은 곳에 있는 초록색 영역부터 실행되는 원리 입니다.

 

만약, 버블링을 중단하고 싶다면, event.stopPropagation(); 를 사용하면 됩니다.

stopPropagation 을 사용하면, func2 가 실행이 되고, 그 위에 있는 func1 은 실행되지 않습니다.

 

캡쳐링

캡쳐링은 버블링과는 반대로, 가장 안에 있는 func3 을 클릭하면, 최상위 부모인 func1 부터 실행이 됩니다.

 

캡쳐링은 기본값이 아니기 때문에, 함수를 만들 때 캡쳐링으로 만들겠다 라고 선언을 해주어야 합니다

 

addEventListener 을 사용합니다. ( 작동할 이벤트 , 실행할 함수 , option(false가 기본값) )

3번째 매개변수에 true 를 주면, 캡쳐링으로 만들어 집니다.

버블링과는 반대로, 가장 바깥쪽에 있는 이벤트부터 실행이 됩니다.

 

캡쳐링을 중지하고 싶다면, event.stopPropagation(); 를 사용합니다.

최상위 부모인 func1 에 stopPropagation(); 을 사용할 경우에, 어떤 영역을 선택하든, func1 만 실행되고 끝납니다.