[JavaScirpt]버블링과 캡처링

만약 input태그 fieldset태그 body태그 html태그에 eventListener를 부여했다고 하자.

그럴때 input의 event를 실행시키게 되면

event의 영역인 fieldset

fieldset의 영역인 body

body의 영역인 html

이

각각 실행 될 것이다.

이것이

위에서 아래로 진행된다면 캡쳐링

아래에서 위로 진행된다면 버블링이다.

1. 캡처링

다음은 캡처링의 예제이다.

결과는 위 코드와 같은데

콘솔부분만 설명해보자면

event.target.nodeName은 그 이벤트(마우스클릭)의 타겟이된 객체의 노드네임을 호출하고

this.nodeName은 이벤트(핸들링?리스너?)가 실행된 노드네임을 호출한다.

그리고 결과값으로 다음과 같이 나오는데

여기서 HTML BODY FIELDSET INPUT순으로 출력된다

이것이 캡쳐링이다.

2.버블링

자. 버블링을 알아보자

위의 코드와 다른점은

빨간 원의 부분이 ture에서 false로 바뀌었다.

그리고 이벤트 리스너로 세번째에 오는 속성값은 use capturing

말 그대로 캡쳐링을 사용할 것이냐는 것이다.

false를 입력하고 출력하면

캡쳐링과 반대의 순서로 출력 될 것이다.

※추가적으로 알아보자면

console.log 세번째 속성값으로 phases[event.eventPhase-1] 이라는 것

여기서 event.eventPhase는 이벤트 객체의 속성중 eventPhase로 속성값은

캡쳐링 : 1

이벤트 타겟 : 2

버블링 : 3

을 리턴한다.

그렇다면

버블링 도중에 멈추게 하려면 어떻게 하면 좋을까?

body태그만 function이 stopHandler로 바뀌였다.

그리고 stopHandler는 event객체에 stopPropagation()메소드를 호출하였다.

Propagation은 연쇄라는 뜻을 가지는데,

이 메소드는 그 이후에 이벤트핸들러를 끊어버린다.

출력 결과는 

HTML만 콘솔에 호출되지 않는다.