#4.0 Input Values
작성 내역
index.html
<body>
<div id="login-form">
<input type="text" placeholder="what is your name?" />
<button>Log In</button>
</div>
</body>querySeletor()를 사용할 때는 대상이 id인지 명확히 해주어야 한다. id/class name/tag name 모두 검색가능하기 때문이다. 반면, getElementById()는 검색대상이 id 뿐이다
app.js
const loginForm = document.querySelector("#login-form"); const loginForm = document.getElementById("login-form");
document OR 하나의 element를 시작으로 검색가능하다
#4.1 Form Submission
user가 입력하는 값의 유효성(validity) 확인
input의 유효성 검사를 진행하려면 input이 form 안에 있어야 한다
여기서, button을 클릭하면 URL에 '?'가 붙고, 페이지가 새로고침 된다. input 창에 입력된 값이 사라진다.
원인 - form이 submit 되고 있기 때문이다
참고 - 입력 후에 Enter을 눌러도 form은 submit 되기 때문에 버튼을 클릭하는 것에 더 이상 신경 쓸 필요가 없다.
HTML 규칙
form 안에서 enter를 누르고 input이 더 존재하지 않는다면 자동으로 submit 된다
form 안에 있는 버튼을 눌렀을 때도 form이 자동으로 submit 된다. form이 submit될 때마다 페이지는 새로고침 된다.
이제 우리의 관심사
브라우저가 새로고침하지 않고 user 정보를 저장했으면 좋겠다.
#4.2 Events
학습목표
submit라는 event가 발생하는 걸 아예 막거나 중간에 개입해서 submit event가 발생했다는 것을 파악하기
변수명.preventDefault();
The method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur. For example, this can be useful when:
- Clicking on a "Submit" button, prevent it from submitting a form
- Clicking on a link, prevent the link from following the URL
Note: Not all events are cancelable. Use the cancelable property to find out if an event is cancelable.
Note: The preventDefault() method does not prevent further propagation of an event through the DOM. Use the stopPropagation() method to handle this.
모든 EventListener 함수의 첫번째 arugment는 항상 지금 막 벌어진 일들에 대한 정보가 될 것임. JavaScript가 제공하는. 우리는 argument 공간만 제공해서 방금 일어난 event에 대한 정보를 JavaScript가 채워넣을 수 있도록 하면 됨.
#4.3 Events part Two
링크의 기본동작은 클릭 시 다른 페이지로 이동하는 것이다. 이걸 막아보자.
영상에서는 클릭으로 비롯되었기 때문에 MouseEvent라고 하는데, console.dir(event)로 확인해보면 PointerEvent라고 뜬다.
MDN의 최신정보(Sep 14, 2022)를 통해 그 원인을 찾을 수 있었다 (출처: MDN)
The PointerEvent interface extends the MouseEvent interface. Although the pointer event interfaces enable applications to create enhanced user experiences on pointer enabled devices, the reality is the vast majority of today's web content is designed to only work with mouse input. Consequently, even if a browser supports pointer events, the browser must still process mouse events so content that assumes mouse-only input will work as is without direct modification. (중략)
