addEventListener 함수 실행 시 브라우저가 하는일

loginForm.addEventListener("submit", onLoginSubmit);

마지막에 이 코드에서 브라우저가 하는 일

loginForm에서 submit이벤트가 발생하면 onLoginSubmit이라는 함수를 실행한다.

여기서 중요한 점은 onLoginSubmit함수를 실행할때 그냥 onLoginSubmit() 이렇게 실행하는게 아니라는 점.

브라우저는 addEventListener의 이밴트를 실행할 때 함수의 첫번째 attribute로 항상 "방금일어난 이밴트에 대한 정보"를 제공한다.

사실은 onLoginSubmit(이밴트에 대한 정보) 를 실행하게 되는 것이다.

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

이 코드를 통해 "submit이밴트에 대한 정보"는 어떻게 생겼는지 콘솔에서 확인해볼수 있다.

이렇게 생겼다. path에 대한정보도 있고 타겟, 타입 등 모든 정보가 다 들어있는 object형태의 이밴트 정보다.

브라우저는 그냥 attribute가 비어있는 함수를 실행만 시키는게 아니라 첫번째 attribute로 항상 방금일어난 이밴트에 대한 정보를 

전달한다는 것을 기억하면 된다.