login 2(preventDefault funciton, JavaScript)

submit 실행시 새로고침되지 않도록 하는 법(feat. preventDefault(); )

 

앞서, form이 submit될때마다 새로고침 되는 문제가 있었음

이젠 엔터를 눌렀을때 혹은 버튼을 눌렀을때(submit), 새로고침 하지 않고 user정보를 저장하고 싶음

summit는 엔터를 누르거나 버튼을 클릭할때 발생함

 

form을 submit할때 입력값을 받아서 저장하고 싶지만 위와같은 코드는 새로고침 됨

새로고침은 form submit의 디폴트임

 

function입력시 ()를 추가한다는건 즉시 실행한다는것임

위 코드에서 submit이 발생하면 loginSubmit를 자동으로 실행해줌

 

submit 이 발생하면 브라우저가 loginsubmit 함수를 호출하게 되는데

호출시 loginsubmit() <-이 괄호안에 첫번째 인자로써 추가적인 정보를 가진체로 호출하게 됨

어떤정보를 브라우저가 주는지 보기 위해서 아래 코드 입력해봄

 

preventDefault() 함수는 어떤 event의 기본행동이 실행되지 않도록 막는것임

또한, preventDefault() 함수는 addEventListener 함수의  첫번째  인자에 있는 함수임 

 

const loginForm = document.querySelector("#login-form");
const loginInput =document.querySelector("#login-form Input");
 
function loginSubmit(event){
    event.preventDefault();//브라우저의 기본동작 막아줌 
    console.log(loginInput.value);
}
 
loginForm.addEventListener("submit",loginSubmit);//form안 엔터를 누르거나 버튼클릭시 submit됨
 

위 코드에서 submit이 될때 loginSubmit 함수가 실행되는데,

submit실행시에는 함수를 실행할때 디폴트가 새로고침으로 설정되어실행됨

이걸 없애기 위해 preventDefault함수 사용,

그러면 이제 console.login(Input.value)시 새로고침 안됌, 안사라지고 값 출력됨

submit시 새로고침 안되고 값 출력

 

 

 

preventDefault 이해하기

HTML코드

JS코드

위 HTML 코드에서 링크클릭시 디폴트는 링크페이지로 넘어가는 것

 

그런데 위와 같이 JS에서 click 이벤트 만들면,

알람 뜨고 페이지 넘어가는거 JS에서 잠시 멈춤 OK누르면 그제야 페이지 이동

즉 alert는 순간 모든동작을 멈추게 하는 특징이 있음

 

function handleLinkClick(event){

 console.log(event);

}

link.addEventListener("click", handleLinkClick);

입력시 콘솔창

이번엔 submit아닌 click에 대한 event 콘솔에 출력해봄

클릭시 함수에 들어가는 기본적인 값들이 바로 위와 같은 것임

어딜클릭했는지에 대한 정보까지 제공함, 그리고 여기선 monuseevent임 이전에 submit이벤트에선 submitevent출력됫어

 

위와같이 입력시 디폴트가 제거되므로 원래 링크 클릭하면 페이지 바로 이동했는데, 페이지 이동안하게 됨