[클립북] 이벤트 캡쳐, 버블링 최적화

목표 :

1. 이벤트의 전파를 막는다.

2. 정확한 사용

 

1. 이벤트의 전파를 막는다.

1-1). 이벤트의 전파(사전 지식)

JavaScript 이벤트 전파 예제

캡처 : window -> document ->  html -> body -> element(상위부터 이벤트 전파)

버블링 : element(하위부터 이벤트 전파) -> body -> html -> document -> window

 

- JavaScript 설정 방법 -
target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);

- options -
1). capture: DOM 트리의 하단에 있는 EventTarget 으로 전송하기 전에, 등록된 listener로 이 타입의 이벤트의 전송 여부를 나타내는 Boolean입니다.

2). once: 리스너를 추가한 후 한 번만 호출되어야 함을 나타내는 Boolean입니다. true이면 호출할 때 listener 가 자동으로 삭제됩니다.

3). passive: true일 경우, listener에서 지정한 함수가 preventDefault()를 호출하지 않음을 나타내는 Boolean입니다. passive listener 가 preventDefault()를 호출하면 user agent는 콘솔 경고를 생성하는 것 외의 작업은 수행하지 않습니다. 자세한 내용은 Improving scrolling performance with passive listeners를 참조하세요.

- 모질라 -

EventTarget.addEventListener()

 

어떻게 선택하느냐에 따라 이벤트의 전파가 달라진다.

관련 부분을 제어하기 위해서는 자바스크립트의 기본적인 이벤트 전파 개념을 알고 있어야 하며,

이벤트 전파방향을 정하고 이 이벤트의 전파를 만들거나, 멈추는 등의 제어가 필요하다.

 

2-2). 이벤트 전파 방지 스크립트

구분	설명	범위(대상)
event.preventDefault();	현재 발생 이벤트를 중지합니다.	자신
event.stopPropagation();	이벤트 전파를 중지합니다.	상위(버블링)
event.stopImmediatePropagation();	현재 발생 이벤트, 이벤트 전파를 중지합니다.	자신, 상위(버블링)

 

위 이벤트 전파 방지 스크립트를 잘 활용하면 특정 이벤트에 자신이 원하는 다른 이벤트를 발생 시키는 이벤트 위임이 가능하며,

기본으로 전파되는 이벤트를 차단하여, 불필요한 이벤트 발생을 제어할 수 있으며,

잘못된 이벤트 동작이나 최적화에 큰 도움이 됩니다.

 

2. 정확한 사용

2-1). 메모리 이슈

이벤트는 리스너를 등록하여 사용합니다. 리스너는 이벤트를 감지하고, 이벤트 발생시 반환된 이벤트 객체와 함께 지정한 콜백 함수(리스너 함수)를 실행시킵니다.

 

이벤트는 지정된 콜백 함수(리스너 함수)를 메모리 공간에 유지시키기 때문에(이벤트가 언제 발생할지 모르기 때문에 유지)

별도로 해제하는 로직이 필요합니다.

 

추가 : addEventListener(type, listener[, options]); 

해제 : removeEventListener(type, listener[, options]); 

 

명확하게 이벤트가 작동해야 하는 시점(페이지)에서 이벤트를 등록하고,

이벤트를 벗어나기 직전 삭제(해제)를 통해 불필요한 이벤트 리스너 함수를 제거(해제)하여

메모리 누수를 최소화해줍니다.

 

참고] 리스너 함수를 해제하기 위해서는 리스너가 참조형 정적 함수일 때 가능