[Javascript] 이벤트 버블링과 이벤트 캡쳐링

이벤트 버블링

이벤트 버블링이란 부모, 자식 태그에 모두 onclick 이벤트가 있을 경우 자식태그를 클릭하면 부모태그까지 클릭이벤트가 전파시키는 html의 특징이다. 브라우저가 이벤트를 감지할 때 해당 요소에서 최상위 요소까지 이벤트를 전파시킨다.

 

이벤트 캡쳐링

이벤트 캡쳐링이란 이벤트버블링과는 반대로 최상위 태그부터 자식태그까지 이벤트를 전파하는 방식이다. addEventListener() API에서 옵션 객체에 capture:true를 설정해주어 설정한다. 

 

이벤트 위임

이벤트 버블링을 이용하여 부모태그에 이벤트 리스너를 적용하여 자식태그에서 발생한 클릭이벤트를 감지, 제어할 수 있다.

 

 

 

<a>태그가 부모이고 onclick 이벤트를 가진 태그가 자식일 경우,

이벤트 버블링이 일어나야 한다고 생각했다. 하지만, 이벤트 캡쳐링 같이 부모의 href 가 먼저 실행되었다.

<a href="url">
    <div class="popup_banner_txt_area">
       	<div class="btn_banner_action">
            <p class="btn_banner_prev" onclick="event.stopPropagation(); goPrev();">이전</p>
            <p class="btn_banner_next" onclick="event.stopPropagation(); goNext();">다음</p>
        </div>
    </div>
</a>

회색영역이 a 태그, 화살표 영역이 p태그이다

 

href가 onclick보다 실행속도가 더 빠른 것은 아닐까 싶어 onclick으로 다시 수정하여 디버깅해보니, 생각했던 대로 버블링이 일어났다.

 

그래서 자식 태그의 onclick에 event.stopPropagation();를 추가해주었다.

 

event.stopPropagation()

해당 이벤트가 이벤트 버블링/ 캡쳐링 되는 것을 막는 메서드이다.

<div onclick="window.open('url','_target')">
    <div class="popup_banner_txt_area">
       	<div class="btn_banner_action">
            <p class="btn_banner_prev" onclick="event.stopPropagation(); goPrev();">이전</p>
            <p class="btn_banner_next" onclick="event.stopPropagation(); goNext();">다음</p>
        </div>
    </div>
</div>

 

onclick 안에 function(){event.stopPropagation(); goPrev();}로 넣어주어야 한다고 생각했으나, event.stopPropagation()는 자체가 method로 이미 정의되어 있으므로 호출해주기만 하면 된다.

goPrev() 함수 블럭 안에 작성하여 goPrev 함수만 실행시켜도 된다.

 

a태그의 href를 무마시키는데에 event.preventDefault()를 쓰면 어떨까 생각하였다. 하지만, 클릭이벤트 ui가 겹쳐서 자식태그의 클릭이벤트만 실행시키기 위해서는 맞지 않는 방법이었다.

 

event.preventDefault()

html에서 당연하게 사용되는 고유의 동작을 중단시키는 메서드로, submit태그의 form태그 전송, a태그의 클릭시 href로 페이지 이동 등의 동작을 중단한다.

document.getElementById('aTag').click(function(e){
	e.preventDefault();
});

이렇게 사용할 경우 a태그의 페이지 이동마저 중단시키게 된다. a태그만 클릭할 경우 (부모태그만 클릭) 원래대로 동작해야 했으므로, 맞지 않았다.

 

 

이벤트 버블링/캡쳐링에 대한 개념은 공부해서 알고는 있었지만, 막상 해당 상황이 닥치니 당황스러웠다.

역시 겪어봐야 아는 법이다.