Event
- 어떤 행위가 발생하는 것( ex. click, hover 등 )
- JS는 모든 event를 listen 할 수 있다.
-> JS에게 어떤 event를 listen 하고 싶은지 알려줘야 한다.- eventListener : event가 발생했다는 것을 알려준다.
AddEventListener()
지정한 유형의 event를 대상이 수신할 때마다 호출할 fucntion을 설정한다.
HTML_element.addEventListener("event", function);
ex)
function handleTitleClick(){
console.log("title was clicked!");}
title.addEventListener("click", handleTitleClick);
/* HTML element(위의 코드에선 'title')이 있을 때,
addEventListener를 호출하고,
listen하고 싶은 event(위의 코드에선 'click')를 알려준다. */
/* 그리고 event가 발생하면,
호출할 function(위의 코드에선 handleTitleClick)을 전달한다.*/PreventDefault()
어떤 evnet의 기본 행동이 발생되지 않도록 막는다.
- prevnetDefault()는 EventListener function의 첫 번째 argument 안에 있는 function이다.(이때, 첫 번째 argument는 지금 막 벌어진 event에 대한 정보를 가지고 있다)
- JS는 argument를 담아서 function을 호출하는데, 이 argument가 기본 정보를 제공한다.
기본 행동이란? 어떤 function에 대해 브라우저가 기본적으로 수행하는 동작.
ex) 누군가 form을 submit하면 브라우저는 기본적으로 페이지를 새로고침 한다.(= 기본 행동)
-> 이때 preventDefault()를 추가하면 기본 행동을 막을 수 있다.
ex)
/* HTML form안에 submit type의 input 작성, JS에서 variable로 정의 */
const loginForm = document.querySelector("#login_form");
function onLoginSubmit(event){
evet.preventDefault();
console.log(event);}
loginForm.addEventListener("submit", onLoginSubmit);
/* preventDefault()를 추가하여
login form이 submit되어도 브라우저는 페이지를 새로고침하지 않는다.*/