[JS] preventDefault() 와 stopPropagation() 의 차이

event 객체의 preventDefault, stopPropagation, bubbling 에 대해 알아보도록 하겠습니다.

우선 코드를 보겠습니다.

<div id="div1"> <div id="div2"> <a href="javascript:alert('a');"> <div id="div3">div3</div> </a> </div> </div>

순서대로 [div1 > div2 > a > div3] 가 있습니다. 그리고 각 버튼에 이벤트를 정의하겠습니다. 각각의 div는 클릭시 id를 띄워주고 a링크는 클릭시 "a" 문자열을 띄워줍니다.

$("#div1").click(function(e){ alert("div1"); }); $("#div2").click(function(e){ alert("div2"); }); $("#div3").click(function(e){ alert("div3"); });

1. 이벤트의 동작 순서 파악하기

위에 있는 div 를 클릭했을때 얼럿의 순서는 [div3 > div2 > div1 > a] 순이 됩니다. 디비젼의 뎁스를 기준으로 생각하면 [div3 > a > div2 > div1] 이 나올것 같지만 결과를 보면 뎁스순이 아니라는 것을 알 수 있습니다.

2. bubbling

이벤트 순서가 [div3 > div2 > div1 > a] 순으로 나오는 것은 이벤트 버블링때문입니다. 사용자가 등록한 이벤트가 사슬처럼 엮어져서 순차적으로 실행되는 겁니다. 사용자 이벤트가 묶여져서 [div3 > div2 > div1] 가 하나로 처리되고 a링크가 실행됩니다.

3. stopPropagation

클릭이벤트를 조금 변경해보겠습니다.

$("#div1").click(function(e){ alert("div1"); }); $("#div2").click(function(e){ alert("div2"); e.stopPropagation(); }); $("#div3").click(function(e){ alert("div3"); });

이번에는 div2 클릭이벤트에 e.stopPropagation() 이 추가되었습니다.

stopPropagation은 사용자이벤트의 버블링을 해제시켜 버립니다.

원래는 [div3 > div2 > div1] 이 버블링으로 하나로 묶였었는데 div2에서 버블링을 끊어버리면 div1과의 연결고리가 해제됩니다. 그러면 [div3 > div2]가 됩니다. div3를 눌러서 클릭이벤트를 실행시키면 [div3 > div2 > a] 가 실행됩니다.

4. preventDefault

클릭이벤트를 다시 변경해보겠습니다.

$("#div1").click(function(e){ alert("div1"); e.preventDefault(); }); $("#div2").click(function(e){ alert("div2"); }); $("#div3").click(function(e){ alert("div3"); });

div1에 보면 e.preventDefault() 가 추가되었습니다. preventDefault()의 기능은 브라우저에 걸려있는 이벤트를 해제시켜버립니다. a링크뿐만아니라 map, 스크롤기능까지 브라우저의 이벤트 발생을 막아줍니다. 클릭이벤트를 실행시키면 [div3 > div2 > div1] 이 실행되고 preventDefault()가 브라우저의 이벤트를 해제시켜서 a링크는 실행되지 않습니다.

5. 정리

클릭이벤트를 다시 변경했습니다.

$("#div1").click(function(e){ alert("div1"); e.preventDefault(); }); $("#div2").click(function(e){ alert("div2"); e.stopPropagation(); }); $("#div3").click(function(e){ alert("div3"); });

div2에서 stopPropagation을 div1에서 preventDefault 를 걸어주었습니다.

클릭 이벤트 발생히 어떤 결과가 나올지 예상이 되시나요?
실행결과는 [div3 > div2 > a] 가 됩니다. div1에서 preventDefault를 걸어주었지만 div2에서 stopPropagation으로 버블링을 해제하여 preventDefault는 실행되지 않았습니다.

이상으로 preventDefault, stopPropagation, bubbling에 대한 설명이였습니다.