버블링과 캡처링

 

버블링

  간단하게 버블에 대해 말해보자면 액체 속에서 기포가 만들어지는것을 의미한다. 액체 속에서 기포는 항상 위로 올라가므로 버블링이라는 말이 나오면 어떠한 것이 위쪽으로 올라가는것을 생각하면 편할것이다.  bubble sort도 높은 숫자가 먼저 올라가는 정렬이라 생각하면 편하다. (기포는 올라갈수록 액체의 압력이 감소하기때문에 크기가 커진다.)

  여기서 말하는 버블링은 이벤트 버블링을 말하는데 DOM의 한 요소에서 이벤트 발생 시 핸들러를 동작시키고 더 나아가 부모의 핸들러를 동작시키는것을 말한다. 최종적으로 최상단의 부모 요소를 만날때까지 반복하며 핸들러가 동작한다. 일반적으로 거의 모든 이벤트는 버블링 된다고 생각하면 된다.

 

  알고 넘어가야 할 것은 event.target이다. event.target 은 이벤트가 어디서 발생했는지 확인하고 해당 요소에 대한 정보를 알 수 있다. 비슷하게 보이는 this (=event.currentTarget)과는 약간의 차이점이 존재한다.

    event.target : 실제 이벤트가 시작된 타겟 요소, 버블링에 따라 변하지 않음

    this : 현재 실행중인 핸들러에 할당된 요소, 버블링에 따라 변함

 

  버블링 중단하기

    중단 방법은 event.stopPropagation() 을 사용하는것이다. 다만 위쪽으로 일어나는 버블링을 막아주지만 다른 핸들러의 동작을 막을수는 없다.

    사실 버블링을 막는 경우는 거의 없다. 라고 한다.

 

캡처링

  버블링과 반대되는 개념으로 최상위 요소에서 특정 요소로 진행되는 이벤트 전파 방식이다. 다만 실제 코드에서 사용되는 경우는 거의 없다. 그럼에도 이 이벤트를 잡아내고자 한다면 addEventListner에 { capture: true} 옵션을 집어넣으면 된다.

    capture 옵션

      true : 핸들러는 캡처링 단계에서 동작

      false : 핸들러는 버블링 단계에서 동작

  이벤트 흐름의 단계를 알고자 한다면 event.eventPhase 프로퍼티를 알아보면 된다.

 

DOM 이벤트에서의 정의한 이벤트 흐름

  1. 캡처링 단계 - 하위 요소로 전파

    이벤트는 document에서부터 DOM 트리를 따라 event.target 까지 내려간다.

  2. 타깃 단계 - 이벤트가 실제 요소에 전달

    타겟 요소에 설정된 핸들러가 호출된다.

  3. 버블링 단계 - 이벤트가 상위요소로 전파

    이후 이벤트가 event.target 부터 싲가해 최상위 노드까지 전달되며 각 요소의 핸들러를 동작시킨다.

 

  위의 과정들은 이벤트 위임(event deligation)의 토대가 된다. 이벤트 위임은 유사한 요소에 동일한 핸들러를 적용할 때 주로 사용한다. 보통 유사한 요소를 감싸고 있는 컨테이너가 존재하고 그 컨테이너에 이벤트를 할당한다. 이벤트의 위치를 event.target 으로 확인하고 그 값을 상위 컨테이너 핸들러에서 활용한다.

  장점은 코드가 줄어들고 메모리를 절약할 수있다. 또한 DOM 수정이 쉬워진다.

  단점은 이벤트가 반드시 버블링되어야 하며, 모든 하위요소에 발생하는 이벤트에 대해 응답을 해야한다.

 

  예를 들자면 다수의 채팅방이 존재하고 그 목록을 보여준다. 채팅방을 누르면 해당 채팅방으로 접속하도록 이벤트 핸들러를 등록한다.

  채팅방이 5개 미만 정도라면 직접 핸들러를 달아줘도 상관이 없다. 하지만 그 이상이라면 많은 코드가 중복된다. 따라서 하나의 이벤트 핸들러로 통합하여 제어하는것이 편하다. 성능상 이점은 말할 필요도 없다. 핸들러에 필요한 정보들은 event.target 으로 데이터를 받아와 사용한다.