| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
- oralce
- Adobe pdf reader
- Administrator
- 블로그 조회수 늘리기
- Jrun
- 블로그 조회수
- IIS
- 소득세
- JSP
- 갑근세
- JavaScript
- 에덴미술
- Eclipse
- Vista
- CVS
- flash
- 블루수국그림
- CSS
- HTML
- PHP
- MSSQL
- Jexcel
- .NET
- samba
- 인테리어그림
- 블로그 방문자 늘리기
- 국민연금
- MySQL
- 블로그 수익화
- 즐겨찾기 추가
- Today
- Total
I LOVE EJ
[jQuery] stopPropagation, preventDefault, return false 간의 차이점 본문
[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() 차이
'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 |