[JavaScript] event : eventListener function,event, preventDefault()

1. 모든 것은 HTML에서 시작한다

 

2. 그리고 HTML의 element를 가져오고 

 

3. 그 다음 JS 로 이것저것 해주는 것이다.

 

 

Element 의 내부를 보고 싶으면 콘솔창에서 그 변수를 입력해서, 그것이 Object 형태의 하나임을 깨닫고 내부에서 필요로 하는 Property 한 항목을 가져와 활용하면 된다.

 

input 태그의 입력값을 확인해 줄때 이미 HTML에 있는 기능들을 사용해 줄 수 있다

required

MaxLength = 15 등등

 

그것을 해주는 게 form 이다.

 

form 은 submit 된다.

 

button 의 클릭 여부 보다 submit 의 여부가 더 중요해 졌다.

 

submit 이벤트라는 것은 엔터를 누르거나 버튼을 누를 때 발생하는 것이다.

 

eventListener 안에 소괄호를 제외하고 함수명만 적어주는 것은 함수를 바로 실행하지 않겠다는 뜻이다.

 

선언부분외에 함수에 소괄호를 적는 것은 내가 실행시키는 것과 의미가 다르지 않다. 브라우저가 아닌

 

브라우저는 함수를 통해 첫번째 인자에서 무언가 정보를 주고 있다.

브라우저가 우리에게 함수를 통해 어떤 정보를 주는지

이 정보들은 방금 일어난 event에 대한 정보들이다.

 

 

누군가 form을 submit 하면 JS가 이 function을 호출하도록 하고 있다.

 

그치만 JavaScript는 유저를 너무 사랑해서

 

onLoginSubmit() 이대로 호출하는 게 아니라ㅓ

 

어쩌면 발생한 일에 대해 필요로 할만한 정보들을 담아 준다.

onLoginSubmit({information})

 

결론적으로

 

모든 이벤트리스너함수(EventListenr function)의 첫번째 argument는 항상 지금 막 벌어진 일들에 대한 정보다.

장소만(인자만) 제공하면 담아 준다.

 

preventDefault 라는 함수는 어떠한 이벤트의 기본동작도 발생되지 않도록 하는 것이다.

누군가 form 을 submit 하는 이벤트가 생기면 이에 대한 기본동작은 페이지의 리로드 (새로고침)인데 이 preventDefault 함수의 호출로 막은것이다.

 

tomato 라는 인자를 적어줬는데

어떠한 이름도 당연히 상관없다. 관행적으로 event라고 적는다.

이 첫번째 인자를 이벤트리스너함수에 적는다는 것은 JS 로 부터 정보를 받겠다는 것이다.

적지 않으면 받지 않겠다는 것이다.

 

자바스크립트는 이처럼 event Obejct를 기본적으로 제공하고 이에 대해서는 preventDefault라는 함수가 기본적으로 제공된다.

form을 통해 버튼을 클릭하거나 enter를 하였을때 reload가 되어 콘솔에서 출력된 로그를 볼 수 없었던 것이

JS에서 이벤트리스너함수가 기본적으로 제공하는 Object 를 함수의 첫번째 인자인 event로 받아

그 안의 함수인 preventDefault를 활용해 발생하지 않도록 하였다.