관리 메뉴

I LOVE EJ

[jQuery] stopPropagation, preventDefault, return false 간의 차이점 본문

Web publishing/jQuery

[jQuery] stopPropagation, preventDefault, return false 간의 차이점

BeOne 2013. 3. 20. 14:08

자바스크립트 코드에서 이벤트 핸들러처리가 끝난 후 preventDefault() 와 return false 등의 코드를 본적이 있을 것이다. 간혹 stopPropagation() 호출도 보이는데 이들의 차이점을 알아보자 



1) preventDefault vs return false, stopPropagation : jQuery를 사용하지 않은 경우 

  - stopPropagation 은 사용자 정의 이벤트의 bubbling up 되는 것을 막아준다 

    + 사용자 정의 이벤트는 개발자가 직접 이벤트 핸들러를 작성할 경우

    + 즉, 사용자가 작성한 이벤트 핸들러의 동작을 막아준다

  - preventDefault 는 기본 정의 이벤트의 동작을 막아준다 

    + <a href..> 앵커 태그와 같은 기본 제공 이벤트 (사이트로 이동하는 것) 

    + 즉, 기본 이벤트의 동작을 막아준다 

  - return false 는 jQuery 사용할 때와 안할 때의 반응이 틀리다

    + jQuery 사용안할 때는 preventDefault와 동일하게 동작한다 

  

  - 주석 a, b, c 케이스 테스트 : 화면의 "[Click me]" 레이블을 클릭할 경우

 

<html>

<body>

<a href="http://mobicon.tistory.com">

<div id="div1">

<input type="label" id="label1" value="[Click me]"/>

</div>

</a>


<script>

document.getElementById('div1').onclick = function() { 

alert('click div1'); 

};

document.getElementById('label1').onclick = function(e) { 

alert('click label1'); 

// a 

//e.stopPropagation();

// b

//e.preventDefault();

// c

//return false;

};

</script>

</body>

</html>


   + e.stopPropagation() 만 주석 제거

      "click label1" 경고창 뜨고 "mobicon.tistory.com" 사이트로 이동 ("click div1" 경고창 안뜸. 즉, 버블링 업 막아줌)

   + e.preventDefault() 만 주석 제거

      "click label1" 경고창 뜨고 "click div1" 경고창 뜸 그러나 "mobicon.tistory.com"으로 이동하지 않음 (즉, 기본 이벤트 막아줌)

   + return false 만 주석 제거

      "click label1" 경고창 뜨고 "click div1" 경고창 뜸 그러나 "mobicon.tistory.com"으로 이동하지 않음 (즉, 기본 이벤트 막아줌)


  - jQuery를 사용하지 않은 e.preventDefault와 return false 의 동작은 동일하다



2) preventDefault vs return false, stopPropagation : jQuery를 사용할 경우 

  - stopPropagation 상동

  - preventDefault 상동

  - return false 는 jQuery 사용할 때와 안할 때의 반응이 틀리다

    + jQuery 사용할 때는 preventDefault와 동일하게 동작한다 

<html>

<body>

<a href="http://mobicon.tistory.com">

<div id="div1">

<input type="label" id="label1" value="[Click me]"/>

</div>

</a>


<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>

$('#div1').click( function() { 

alert('click div1'); 

} );

$('#label1').click( function(e) { 

alert('click label1'); 

//e.stopPropagation();

//e.preventDefault();

//return false;

} );

</script>

</body>

</html>

   

   + e.stopPropagation() 만 주석 제거

      상동

   + e.preventDefault() 만 주석 제거

      상동

   + return false 만 주석 제거

      "click label1" 경고창 뜨고 "click div1" 경고창은 안 뜸 그리고 "mobicon.tistory.com"으로 이동하지 않음 


  - 결론적으로 jQuery를 사용하여 return false를 쓸 경우 stopPropgation() 와 preventDefault() 가 동시에 적용됨 



<참조>

  - stopPropagation()과 preventDefault() 차이

  - preventDefault() vs return false 차이

  - 자바스크립트 이벤트 핸들링

'Web publishing > jQuery' 카테고리의 다른 글

[Jquery] Show each Easing Method  (0) 2013.03.26
[Library] zeroclipboard  (0) 2013.03.21
jquery 스크롤바  (0) 2013.03.05
자바스크립트 소스  (0) 2013.02.27
구글 jquery 이용  (0) 2011.09.23