| html <body> <form id="login-form"> </form> <a href="https://nomadcoders.co">Go to course!</a> <script src="app.js"> </script> </body> |
js const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const link = document.querySelector("a"); function onLoginSubmit(event){ // event.preventDefault(); console.log(event); const username = loginInput.value; console.log(username); } function handleLinkClick(event) { event.preventDefault(); console.dir(event); } loginForm.addEventListener("submit", onLoginSubmit); link.addEventListener("click", handleLinkClick); |
1. addEventListener 안의 함수 handleLinkClick은 우리가 직접 실행하지 않는다. handleLinkClick(); <<< 이렇게 안쓰니까
2. 이벤트가 발생하면 브라우저가 함수를 받아 실행시켜준다. 이때 이벤트 종류에 따라 정보를 넘겨준다.
ㄴ click : pointEvent, submit : submitEvent // 정보안에는 함수도 들어있다
3. 이벤트 정보는 함수안에 정보에 대한 자리를 할당해 주면 이벤트 정보를 확인할 수 있다.
ㄴ handleLinkClick(event) {
event.preventDefault();
console.dir(event); } - 정보에는 : 클릭위치, 시간 등 많은 것들이 저장되어 있다.
??이벤트에 해당하는 함수가 prevent말고 다른것도 있을 거 같으니까 찾아봐야겠다??
반응형
'프론트엔드 > javascript' 카테고리의 다른 글
| javascript (8) - Login 만들기 #3 (0) | 2023.04.05 |
|---|---|
| javascript (8) - Login 만들기 #2 (0) | 2023.04.04 |
| javascript (8) - Login 만들기 #1 (0) | 2023.04.03 |
| javascript (7) - Html, CSS, JavaScript, toggle (0) | 2023.04.03 |
| javascript (6) - click event, window event (0) | 2023.04.03 |
