[jQuery] preventDefault(), stopPropagation() > Html & Script

본문 바로가기
사이트 내 전체검색


회원로그인

오늘 447
어제 388
최대 618
전체 399,493
마음을 나누는 인터넷 일기장 - 통플 다이어리
Html & Script

[jQuery] preventDefault(), stopPropagation()

페이지 정보

작성자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일18-08-22 15:53 조회198회 댓글0건

본문

preventDefault()

preventDefault 는 기본으로 정의된 이벤트를 작동하지 못하게 하는 메서드

<a>,<input>,<textarea>의 기본 동작을 막을 수 있다.

a태그는 적용된 href 링크값으로 페이지 이동을 해주는 기본 적인 기능을 가짐

a태그를 클릭 했을 때 preventDefault() 메서드를 실행시키면 페이지 이동을 하는 기본 기능을 막는 것

$('a[href]').on('click', function (event) {

        var href = $(this).attr('href');

        if (href == "" || href == "#" || href.toLowerCase() == 'javascript:' || href.toLowerCase() == 'javascript:void(0)') {

            event.preventDefault();

        }

    });

a태그의 기본적인 기능인 페이지 이동 이벤트를 중지하는 스크립트



stopPropagation()

이벤트가 상위 DOM으로 전달, 전파(1)되지 않도록 하는 메서드.

preventDefault()와의 차이점은 전파만 막아주는 것이다.

preventDefault()처럼 기본 이벤트를 막아주진 않는다.


1. 전달, 전파

ㄴ>1-1 버블링

     자식 el에서 발생된 이벤트가 부모 el순으로 전달 되는 현상

ㄴ>1-2 캡쳐링

     부모 el에서 발생된 이벤트가 자식 el순으로 전달 되는 현상



이벤트 중단에 사용 하는 방식 4가지

1. event.preventDefault()

현재 이벤트의 기본 동작 중단

2. event.stopPropagation()

현재 이벤트가 상위로 전파되지 않도록 중단

3. event.stopImmediatepropagation()

현재 이벤트가 상위 && 현재 레벨에 걸린 다른 이벤트도 동작하지 않도록 중단

4. return false

jQuery를 사용할 때 위의 두개를 모두 수행한 것과 같고,

jQuery를 사용하지 않을 때는 event.preventDefault()와 같다.


[출처] [jQuery] preventDefault(), stopPropagation()|작성자 랑코



추천 0

댓글목록

등록된 댓글이 없습니다.

Html & Script 목록

Total 192건 1 페이지
Html & Script 목록
번호 제목 글쓴이 날짜 조회 추천
공지 유니코드의 명칭과 속성 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-13 38312 38
열람중 [jQuery] preventDefault(), stopPropagation() 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-22 199 0
190 소스보기 막기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-22 389 0
189 (자바스크립트) Base64 인코딩/디코딩 소스(UTF-8 지원) 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-20 367 0
188 jquery iframe 제어하기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-08 390 0
187 [펌] Web Worker - 웹에서 멀티 쓰레드 구현하기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-10 369 0
186 CSS Text & Viewport units 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-20 872 0
185 자바스크립트 replace / 문자열 변경하기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-06 2517 0
184 날짜 및 시간 계산(JavaScript) 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-29 2846 0
183 동적으로 select의 option생성하기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-21 3563 0
182 css ul li 가로 정렬 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-06 3205 0
181 자바스크립트 Attr 속성 추가 ,삭제, 조회하기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-29 7614 0
180 오른쪽 마우스 클릭막기, 우클릭금지 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-29 3270 0
179 색상 코드표 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-19 2893 0
178 자바스크립트 in_array() 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-31 2010 0
177 (Jquery) radio checked 라디오 제어 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-21 2876 0
176 자바스크립트 날짜 차이 계산 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-13 2519 0
175 [AJAX] 1초마다 데이터 불러오기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-06 3178 0
174 Load Results From Database On Page Scroll Using jQ… 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-06 2705 0
173 [CSS] placeholder 컬러바꾸기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-06 2869 0
게시물 검색

Copyright © nuno21.net All rights reserved. 상단으로
모바일 버전으로 보기