4.2 Events (1)

강의

우리는 이제 버튼의 클릭여부 말고 form의 submit에 관심이 있다.
변수 loginButton 삭제하고, loginForm 개같이 부활 ㅋㅋ

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
function onLoginSubmit(){
    const username = loginInput.value;
    console.log(username);
}
loginForm.addEventListener("submit",onLoginSubmit);

form을 submit할 때 입력값을 받아내온다. 하지만, 입력값이 콘솔에 출력되는 동시에 새로고침이 되기 때문에 적은게 사라진다....! 있었는데..없어요..!!
=> submit event를 감지해내고 있다!! 하지만, 아직 새로고침은 못막고 있다.

새로고침이 일어나는건 form submit의 기본 동작이다. 브라우저가 그러라고 프로그래밍 되어있다.
=> 우리가 해야할 일은 이 기본동작이 발생하지 않도록 하는거다.

---

( )를 추가하여 함수( ) 이렇게 적는건 함수를 '즉시' 실행한다는 뜻인데 우린 바로 실행되는걸 원하지 않는다. submit event가 발생하면 브라우저가 알아서 저 함수를 실행시켜 줄거다.

여기서 짚고 넘어가야할게...니꼬가 거짓말을 했다...! (??)

function onLoginSubmit(){
    const username = loginInput.value;
    console.log(username);
}
loginForm.addEventListener("submit",onLoginSubmit);

브라우저가 정확히는 onLoginSubmit( )을 하고 있는게 아니다. 브라우저는 우선 onLoginSubmit함수를 호출하고 함수를 실행시키고 있기는 하지만!!!!!!!!!!! onLoginSubmit( )<- 괄호 안에서 나에게 정보를 주고 있다. 브라우저는 브라우저 내에서 이벤트로부터 정보를 잡아내서 onLoginSubmit() <- 실행 버튼을 누르고 있는거다. 너에게 중요할지도 모르는 정보를 가지고 있는 채로 말이지 ㅇㅇ

괄호 안에 아무거나 넣어서 결과를 확인해보면

function onLoginSubmit(tomato){
    tomato.preventDefault();
    console.log(tomato);
}
loginForm.addEventListener("submit",onLoginSubmit);

SubmitEvent {isTrusted: true, ~~~~~

뭐 이런것들이 출력이 된다. 이벤트들을 다룰 수 있는 함수들에 대해 ㅇㅇ

tomato argument에 포함된 정보로 이것저것 하게 될테니 이 부분을 꼭 제대로 이해하고 가야한다.

우리가 지금 하고 있는 건 onLoginSubmit이라는 함수를 만들고, 이 함수가 하나의 인자를 받도록 하고 있는거다.
= 함수가 하나의 인자를 받도록 하고 그걸 JS에 넘겨주고 있다.

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

• preventDefault : 어떤 이벤트의 기본 행동이든지 발생되지 않도록 막는거다. (기본행동=기본동작)

누군가 form을 submit하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어있다. preventDefault 함수를 추가하면 그 기본 동작을 막게된다.

EventListener에 어떤 함수를 추가하던 간에, JS에서는 공짜로 첫번째 인자로 발생된 이벤트에 대한 정보를 줄거다. 선택사항이니 필요없으면 그냥 두셈

하지만 ( ) 안에 아무거나 집어 넣으면(= 공간을 만들어주면) JS에서 이벤트를 채워줄거다. 보통은 event를 넣어주는데, 이게 관행이다.

function onLoginSubmit(event){
    event.preventDefault();
    console.log(loginInput.value);
}
loginForm.addEventListener("submit",onLoginSubmit);

이렇게 적으면, 엔터를 눌러도 새로고침도 안되고, 내가 입력한게 콘솔에 출력되는걸 확인할 수 있다.
이제 우리가 submit event를 컨트롤 하는거다!!!

submit event가 발생할 때 JS는 onLoginSubmit 함수를 호출하고, 이때 event object를 인자로 주고 있고, 우리는 기본 동작이 실행되는걸 막아주고 있다.

아마 다음 강의까지 들으면 100% 이해될거다!