form 텍스트 박스 새로고침 현상 방지 / 브라우저 동작 막기

form 태그로 submit하면 브라우저가 새로고침 된다.

이는 브라우저에서 form 태그를 사용하면 브라우저가 새로고침 되는것이 기본 값이다.

 

form을 submit하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어있어,
preventDefault() 함수를 추가함으로써 브라우저의 기본 동작을 막을 수 있다.

* preventDefault 함수는 EventListener 함수의 '첫 번째 argument' 안에 있는 함수이다.

  첫 arument는 지금 막 벌어진 event들에 대한 정보를 갖고 있다.

form 태그에 값을 입력해서 submit를 수행했으나 새로고침이 일어나지 않는다.

 

 

preventDefault()는 form에서만 사용하는 함수가 아니다.

preventDefault() 실행시 브라우저에서 기본 제공하는 함수의 기능을 막는 역할을 한다.

a 태그 기능인 링크로 이동을 preventDefault() 통해서 기능을 차단할 수 있다. 

.preventDefault()실행 시 defaultPrevented: true로 변경된다.

링크 클릭시 이동이 불가능하다.

 

👉 요약

.preventDefault()실행 시 defaultPrevented: true로 설정시켜 기본기능을 막는다.