이벤트 흐름 제어 (버블링과 캡처링)

개요

ionic, cordova 를 이용하여, 하이브리드 앱을 제작 중, android(겔럭시 스마트폰) 기기의 뒤로가기 버튼을 제어 할 상황이 생겼다. 이를 ionic에서 지원하는 backbutton addEventListener를 이용하여 제어하였지만, 설계와 다르게 함수가 조금 더 이르게 동작하는 현상을 발견했다.

 

1. 캡쳐링:

• 이벤트가 최상위 노드에서 시작하여 목표 요소까지 이동함
• 이벤트 핸들러가 루트 노드에서 시작하여 목표 요소에 이르기까지 순차적으로 호출됨.

2. 버블링:

• 이벤트가 목표 요소에서 시작하여 최상위 노드까지 이동함.
• 이벤트 핸들러가 목표 요소에서 시작하여 루트 노드에 이르기까지 역순으로 호출됨.

 

위의 말로만 봐선 잘 이해가 안될수 있다. 아래코드와 함께 보면,

---

예시코드

 

  private initBackbuttonEvent() {

    let isTouched = false;

    document.addEventListener('backbutton', () => {
      if (this.router.url === '/' || this.router.url === '/landing') {
        if (isTouched) {
          this.closeProcess();
        } else {
          this.notifier.info('뒤로 버튼을 한 번 더 누르면 종료됩니다', 2000).subscribe(() => {
            isTouched = true;

            setTimeout(() => {
              isTouched = false;
            }, 2000);
          });
        }
      }
    }, false); // 아무것도 넣지 않으면 기본값(false) 캡처링을 원한다면 { capture: true } 또는 true 를 매개변수로 넣어주면 됨
  }

 

addEventListener함수에, 3개의 인자를 넣을 수 있다.

element.addEventListener('click', myFunction, true);

 

이러한 형태인데, 3번째 인자가 캡처링과 버블링 동작을 결정해줄 매개변수이다.

 

캡처링과 버블링을 이용하면 DOM 이벤트의 전파 방향을 설정할 수 있는데, 

예를 들어 버블링 인 경우,

• addEventListener 내에 모든 함수가 동작한 뒤, 마지막으로 첫번째 매개변수인 (ex) 'backbutton', 'click')이 동작한다.

반대로 캡처링인 경우, 

• addEventListener 의 루트노드에서 먼저 이벤트(backbutton, click등) 가 동작하고, 이후에 내부 함수가 동작한다.

 

# 캡처링으로 동작은 거의 쓰이지 않지만, 필요한 경우가 있는 사람들이 있을것입니다.