addEventListener 와 function 관계

function Afunction(a) {
    console.log('hi ' + a);
}
Afunction("Dalbong")

 function은 ()로 실행하고 그 안의 정보를 argument가 받아온다.

function onLoginSubmit() {
    console.log(loginInput.value);
}

loginForm.addEventListener("submit", onLoginSubmit)

현재는 argument를 사용하고 있지 않다.

addEventListener를 활용할 때 argument가 있다면 어떤 정보를 받아올까?

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

function onLoginSubmit(event) {
    console.log(event);
}

loginForm.addEventListener("submit", onLoginSubmit);

loginForm.addEventListener("submit", onLoginSubmit);

브라우저는 브라우저 내에서 event("submit")로부터 정보를 잡아내서

그 정보를 가지고 있는 채로 onLoginSubmit function 실행 버튼을 누르고 있다.

 

function onLoginSubmit(event) {};

function이 하나의 argument를 받도록 하고 그걸 JavaScript에 넘겨주고 있다.

 

결론

EventListener function의 첫 번째 argument는 지금 벌어진 event 정보.

argument공간만 제공하면 JavaScript가 알아서 방금 일어난 event에 대한 정보를 지닌 argument에 채워 넣을 거다.

event는 해당 함수가 포함된 이벤트에 대한 정보.

 

@

선택사항이다.

function onLoginSubmit()  = 어떤 정보도 받지 않겠다는 건데

function onLoginSubmit(event) = JavaScript에서 event 정보를 채워줌.

argument자리는 event로 적어서 공간을 만들어주는 게 관행이다.