[JS] preventDefault 함수로 브라우저 기본 동작 제어하기

[ 노마드코더 학습 기록 ]

바닐라 JS로 크롬 앱 만들기(4.2 Events)

---

지난 강의를 통해 form을 배웠고 그로인해 이제 button이 필요하지 않다는 것을 알았다.

form의 submit에 대해 알아보도록 하자.

 

먼저 submint이라는 event가 발생하는 걸 아에 막거나 중간에 개입해서 submit event가 발생했다는 걸 파악하고 싶다.

const loginForm = document.querySelector("#login-form")
const loginInput = document.querySelector("#login-form input");

function onLoginSunmit() {
    const username = loginInput.value;
    console.log(username)
} 

loginForm.addEventListener("submit", onLoginSunmit);

이제 button은 필요하지 않으니 지워주고 login-form을 찾아서 loginForm 변수에 담아주고

addEventListener를 통해 "click"이 아닌 "submit"을 사용하여 submit event를 사용하도록 한다.

그리고 함수 이름도 알맞게 변경해준다.

 

이제 form의 submit event를 감지할 수 있다.

submit event는 엔터를 누르거나 버튼을 클릭할 때 발생된다는 것을 기억하자!

 

코드를 실행하고 input창에 글자를 작성한 후 엔터나 버튼을 누르면 console창에 input창에 입력했던 글자가 잠깐 나타났다 사라지는데 이것은 form을 submit할 때 입력값을 받아내는 것이다. 

submit event를 감지하고 있고 잘 작동된다!

 

하지만 submit 할때마다 새로고침 되는 것은 아직 제어하지 못하고 있다.

새로고침이 일어나는건 form submit의 기본동작인데 브라우저는 엔터를 누를 때 새로고침을 하고 form을 submit하도록 되어있다.

 

 

EventListener를 추가할 때, onLoginSunmit 부분 끝에 ()를 추가하지 않는다.

loginForm.addEventListener("submit", onLoginSunmit);       ----->  O

loginForm.addEventListener("submit", onLoginSunmit());    ----->  X

()을 추가하는건 function을 '즉시 실행한다'는 뜻인데 바로 실행되는 걸 원하지 않기 때문에 ()을 떼준다.

(브라우저는 ()을 더하면 보자마자 자동으로 function을 실행시킴)

 

여기서 짚고 넘어가야할 것은 (니꼬쌤이 갑자기 거짓말 했다고 했다 도동탁!)

브라우저가 정확히는 onLoginSubmit()을 하고 있는게 아니다.

브라우저는 우선 onLoginSubmit function을 호출하고 실행시키고 있기는 하지만

onLoginSubmit(info) ( )안에서 우리에게 정보를 주고 있다.

브라우저는 브라우저 내에서 event로부터 정보를 잡아내서 onLoginSubmit function 실행 버튼을 누르고 있다.

(우리에게 중요할지도 모르는 정보를 가지고 있는 채로)

 

 

이게 무슨 말인지 이해를 못했지만 니꼬쌤이 좀만 기다려보면 이해될거라고 겁먹지 말고 페이지 닫지 말고 영상 끄지 말라곸 말씀해주셨닼ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ내 맘 어케 아셨찌ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

 

const loginForm = document.querySelector("#login-form")
const loginInput = document.querySelector("#login-form input");

function onLoginSunmit(tomato) {
    tomato.preventDefault();  //function 추가로 브라우저의 기본 동작이 발생되지 않도록 막는다.
    console.log(tomato)
} 

loginForm.addEventListener("submit", onLoginSunmit);

function onLoginSunmit의 괄호안에 (tomato)를 집어넣고 tomato.preventDefault();를 추가해주었다.

console.log(tomato)를 통해 브라우저가 우리한테 어떤 정보를 넘겨주는지 확인해보자.

 

 

방금 실행된 event에 대한 정보

 

일단 뭔진 모르겠지만 onLoginSunmit function에 대한argument 뭔가 정보를 얻고있다.

(방금 실행된 event에 대한 여러 정보라는 건 강의 후반에 알게되었다)

 

우리가 지금 하고 있는 건 onLoginSunmit이라는 function을 만들고

이 function이 하나의 argument(tomato)를 받도록 하고 그걸 JS에 넘겨주는 것이다.

 

모든 EventListener function의 첫번째 argument는 항상 지금 막 벌어진 일들에 대한 정보가 된다.

 

PreventDefault 함수는 어떤 event의 기본 동작이 발생되지 않도록 막을 수 있다.

지금 우리의 프로그램은 form을 submit하면 브라우저의 기본동작으로 인해 페이지 새로고침 하도록 되어있다.

PreventDefault 함수를 통해 막을 수 있으며, EventLister 함수의 첫번째 argument 안에 있는 function이다.

EventLister에 어떤 function을 추가하던지 JS에서는 첫번째 argument로 발생된 event에 대한 정보를 줄 것이다.

( )안을 비워두면 어떤 정보도 받을 수 없겠지만 무언가 값을 넣어주면(tomato) JS에서 event를 채워 줄 것이다.

 

const loginForm = document.querySelector("#login-form")
const loginInput = document.querySelector("#login-form input");

function onLoginSunmit(event) {
    event.preventDefault();
    console.log(loginInput.value)
} 

loginForm.addEventListener("submit", onLoginSunmit);

(tomato)를 (event)로 바꿔주고 (보통 이렇게 작성하는게 관행이라고 한다.)

console.log(loginInput.value)로 변경하였다.

 

쨘! 이러면 버튼을 클릭해도 새로고침이 되지 않는다는 것을 확인할 수 있따👏👏👏

이제 우리는 submit event를 제어할 수 있게 되었다

 

 정리 

submit event가 발생할 때 JS는 function onLoginSunmit을 호출.

이때 event object를 argument로 주고 preventDefault를 이용하여 기본 동작이 실행되는 걸 막아준다.

 

함수 안에 들어가는 argument는 event이다.

사실 tomato든 apple이든 공간만 할당해주면 되는데 JS가 그 공간에 알아서 정보를 채워준다.

(하지만 event라고 작성하는게 관행)

 

그 정보들은 지금 막 벌어진 상황에 대한 기본 정보를 가지고 있다.(submit, click등과 같은 evnet 정보)

그리고 event(첫번째 argumet)안에는  preventDefault라는 함수가 있는데

이 함수를 통해 브라우저의 기본동작을 막을 수 있다.

 

---

이번에 강의에서 한 일은 브라우저가 기본 동작을 실행하지 못하게 막아준 것 뿐이다.

이번 강의에서는 아무것도 안했지만 JS가 event object정보를 담은 채로 function을 호출한다는 것과

기본적으로 제공되는 preventDefault를 통해 브라우저의 기본 동작을 막을 수 있다는 것을 배웠다.

 

하지만 니꼬쌤 저는 아직 헷갈려요,,,,,,,,,,,

더 열심히 공부하겠슴니다🥲