첨부파일 https://eond.com/jquery/361251

자바스크립트 코드에서 이벤트 핸들러처리가 끝난 후 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 차이

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

코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 142 articles in 6 / 8 pages
번호 제목 제목 날짜날짜
공지 슬라이더 스크립트 4종 2016/07/03 0
공지 jQuery 추천 사이트 2015/06/08 0
41 [팁] [기초추천] jQuery ready와 load의 차이 (오중호랑이의 비밀로그, 2013/02/16) 파일 2015/08/27 0
40 [팁] jQuery Plugin (제이쿼리 플러그인) 만들기 2015/08/26 0
39 [플러그인] 그 밖에 다양한 제이쿼리 플러그인 2015/08/26 0
현재글 [팁] [jQuery] stopPropagation, preventDefault, return false 간의 차이점 2015/08/26 0
37 [플러그인] [jQuery] 커스텀 스크롤바 파일 2015/08/26 0
36 [기초활용] [jQuery] 리스트 목록 정렬 2015/08/25 0
35 [플러그인] selectivizr 2015/08/25 0
34 [플러그인] jQuery 이미지 슬라이딩뷰 플러그인, jcarousel 2015/08/24 0
33 [기초활용] [jQuery/Javascript] 접속한 주소 확인 2015/08/23 0
32 [플러그인] jquery Sidr plugin, 반응형 사이드바 플러그인 2015/08/22 0
31 [플러그인] jQuery.innerfade.js 플러그인, 이미지 페이드인/페이드아웃 파일 2015/08/20 0
30 [기초활용] [jQuery] 화면 전환시 스르륵/천천히/부드럽게 화면(페이지) 전환 2015/08/18 0
29 [고급활용] jQuery 탭+네비게이션 버튼 2015/08/09 0
28 [기초활용] [jquery] 외부 함수에 $(this)를 참조하고자 할 때 2015/08/14 0
27 [팁] [스크랩] jQuery 퍼포먼스 향상을 위한 Tips And Tricks 2015/08/13 0
26 [플러그인] jquery Validation 2015/08/13 0
25 [추천사이트] jQuery 함수 정리해놓은 사이트 2015/08/12 0
24 [메소드] [jQuery] parseInt() 2015/08/13 0
23 [고급활용] JQuery엘리먼트에 새로운 함수를 추가(JQuery.fn.extend(object)) 2015/08/13 0

해시태그 디렉터리