[jQuery] preventDefault(), stopPropagation()

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()|작성자 랑코