4-0
button 만들기,click
const liginInput=document.querySelector("#login-form input");
user가 버튼을 클릭할 때 감지.
document(html코드)안에 login-form(부모,id) 안에 input(자식)
document,또는 하나의 element를 통해서 "검색"이 가능함.
(오직 하나의 element안에서 찾을 수 있음)
funtion onLoginBtnClcik () {
console.dir(loginIput.value)
console.log("click")
}
loginButton.addEventListener("click",onLoginBtnClick);
(loginButton. clickEvent 연결짓기)
4-1
html 규칙
form 안에서 엔터를 누르고 input이 더 존재하지 않는다면 자동으로 submit 됨
form이 submit될 때마다 페이지는 새로고침됨.
4-2
function onoginSubmit(event) {
event.preventDefault();
console.log(event);
}
두번째줄을 호출하면 브라우저의 기본 동작을 막아줌.
-form의 기본동작은 submit
event는 공간을 만들어주는거.
4-3
-링크의 기본 동작은 클릭시 다른 공간으로 이동하는거
-evnet.preventDefault(); >함수의 기본동작을 막아줌.
alert.다른 동작은 block함.
함수를 실행시키는 동시에 그 함수의 첫번째 인자로 object넣어줌.
object는 방금 일어난 event에 대한 여러 정보가 담겨있음.
addEventListener 안에 있는 함수는 직접 실행하지 않음.
link.addEventListener("click", handleLinkClick);
브라우저가 실행해줌. 브라우저는 실행뿐만 아니라 event에 대한 정보도 담아줌.
정보를 담아줄 자리를 만들어주면 됨. 이 정보 안에는 몇 가지 함수도 같이 들어있을거.
function handleLinkClick(event) {
event.preventDefault();
}
