[JS] div, form, input /// EventListenr 의 event 의 preventDefault()

<input> 에는 미리 정의된 required, maxlength 등을 활용할 수 있다(내가 이 기능을 직접 구현하지 않아도 됨. JS에서). 유효성 검사[Validation]을 하기 위해서는 <div> 가 아닌 <form> 내부에 있어야 유효성 검사 기능을 비롯한 HTML의 도움을 받을 수 있다.

 

ex) 유효성 검사를 직접 짠 예시

<input> 에게 required, maxlength 값을 주지 않고 오로지 .js 에서 구현한 것이다. input으로 들어오는 값을 저장하고, 이 저장한 값을 가지고 공백인가? 글자수 제한을 넘어서는가? 에 대해 작성한 예시.

---

---

---

<div><input></div> 을

<form><input></form> 로 바꾸고, required, maxlength 값을 주었다. 

 

그리고 js에서 하던 유효성 검사 구문을 아에 지웠다.

<input> 내의 required 라는 Attribute 는 브라우저가 제공해주는 기능이고, 이 브라우저가 제공하는 기능을 이용하기 위해서는 <input> 을 <form> 타입에 엮어야 한다.

---

---

---

<form> 이 submit 되면서 홈페이지를 재시작 시킨다.

<input> 안에 있는 <button>을 누르거나 타입이 submit인 input을 클릭하면<input type="submit" value="log in">,

<form> 안에서 엔터를 누르거나 <form> 안에 있는 버튼을 눌렀을 때, <form>이 자동으로 submit 된다는 것

 

-> <form> 타입을 이용해서 프로그래밍을 할 경우 마우스 이벤트인 click을 신경 쓸 필요가 없어진다는 말이다.

 

=> 그러나 form이 sumbit 될 때마다 페이지 전체가 새로고침이 되므로, 이는 문제가 된다. 이제 이 문제를 해결할 것이다.  웹사이트 전체를 새로고침 하지 않는 방향으로 나아갈 것이다.

---

---

 

---

모든 EventListner function의 첫 번째 argument는 항상 지금 막 벌어진 일들에 대한 정보가 될 것이다. JS 가 제공하는 정보다. 우리는 그 정보를 저장하기 위한 공간만 제공하면 된다. 그럼 이 공간에 방금 일어난 event 에 대한 정보를 지닌 argument를 채워 넣을 것이다.

가령 아래의 코드에서는 function onLoginSubmit() {} 이었던 것에 argument 를 추가하여 정보를 받아들이는 것이다. function onLoginSubmit(tomato) {} 이렇게 코드를 작성할 경우 해당 함수가 호출되는 지점, 즉 어떠한 event 가 일어난다면, 그 순간 해당 event 에 관한 정보가 EventListener의 함수인 onLoginSubmit 함수의 첫 번째 argument인 tomato 에 들어가는 것이다.

 

가끔은 뭐가 클릭됐는지, 어디가 클릭됐는지 등 정보를 알고 싶을 때가 있다. 그럴 때를 위해서 쓴다. tomato를.

가령, 우리가 브라우저의 기본 동작(새로고침 등)을 막아야 할 필요가 있을 때에는 tomato.preventDefault(); 를 하는 것처럼 이 정보[tomato]를 활용하면 된다.

 

tomato: information about the event that just happened. 방금 일어난 event에 대한 정보가 담겨있다.

 

입력 전

입력 후

해당 event인 submit이 일어나자, 이 "submit" event 에 대한 정보를 받아와서 argument 인 tomato에 값을 저장한다.

 

이 때 여기서 사용한 코드인 tom ato.preventDefault(); 를 봐보자.

prventDefault() 라는 function은 어떤 event의 기본 행동이 발생되지 않도록 막는 것이다.

누군가 form 을 submit 하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어있다. 이 경우 'default: 브라우저 새로고침'이기 때문에 preventDefault() 함수를 부를 경우 새로고침이 발생하지 않도록 한다.

이 preventDefault() 는 EventListner 함수(onLoginSubmit)의 첫 번째 argument(tomato) 안에 있는 function 이다.

 

보통 JS에서는 이 tomato 라고 불렀던 공간을, event 라고 작성하는 것이 관행이다.