e.preventDefault()란?

간단하게 말하면 특정 이벤트의 기본 동작을 막는 JavaScript메서드 입니다.

 

예를 들어

a태그를 누르면 href를 통해 해당 링크로 이동을 하고

button을 누르면 해당 버튼의 type대로 동작을 합니다.

 

하지만 preventDefault() 메서드를 호출하면 이벤트가 발생했을 때

즉, a나 button을 클릭했을 때 수행되는 기본동작들을 중단 시킬수 있습니다.

보통 preventDefault()메서드는 기본 동작을 중지하고 추가적인 동작을 수행하고자 할때 유용 합니다.

 

---

 

더 직관적인 예로 

form태그를 통해 button으로 제출을 하는 상황입니다.

 

JavaScript코드

$('form').on('submit', function(e) {

    console.log('폼이 제출되었습니다.');
});

위 코드처럼 해버리면 submit이 됨과 동시에 console창에 해당 문자열이 잠깐 뜨고 submit은 페이지를 새로고침하면서 제출을 하기 때문에 문자열이 바로 사라지게 됩니다.

 

JavaScript코드

$('form').on('submit', function(e) {
    e.preventDefault(); // 폼 제출의 기본 동작 중지

    console.log('폼이 제출되었습니다.');
});

하지만 위 코드에 preventDefault()메서드를 사용하면 summit의 기본동작인 페이지를 새로고침 하면서 제출 하는것을 중단시키고 console.log의 문자열을 계속볼수 있게 됩니다.

 

 

 

배워나가는 코린이 입니다!!

부족한게 있다면 댓글로 지적해주세요!! 감사합니다!😊