[바닐라 JS로 크롬 앱 만들기] # 4.2-4.3 Events

form의 기본 동작: submit 후 페이지 새로고침
링크의 기본 동작: 클릭 시 다른 페이지로 이동

브라우저의 기본 동작을 막아주는 함수: preventDefault()

📌form의 기본 동작

user name을 입력한 후에 Log In 버튼을 클릭하거나 엔터를 누르면, 바로 submit이 되고 웹 페이지 전체가 새로고침된다.

✔️왜?
브라우저는 엔터나 버튼이 눌리면 새로고침을 하고 form을 submit하도록 셋팅되어 있기 때문이다. 새로고침이 일어나는 건 form submit의 기본 동작이다. 하지만 우리가 원하는 것은 submit까지만이지, 새로고침까지가 아니다.

✔️목표

form을 submit 할 때 새로고침을 막는다.

✔️해결 방법

preventDefault() 함수를 추가함으로써 브라우저의 기본 동작을 막을 수 있다.

preventDefault() 함수는 어떤 event의 기본 동작이 발생하지 않도록 해준다. 여기서 말하는 기본 동작은 어떤 funtion에 대해 브라우저가 기본적으로 수행하는 동작이다. 예를 들어 누군가 form을 submit하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어 있는데, preventDefault() 함수를 사용하면 새로고침을 막을 수 있다.

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");

function onLoginSubmit(event) { // 순서 2
    event.preventDefault(); // 순서 3
    console.log(loginInput.value);
}

loginForm.addEventListener("submit", onLoginSubmit); // 순서 1

• 순서

1. EventListener 생성 (addEventListener) 후 함수onLoginSubmit에게 event 토스(toss)

2. user가 click 또는 event 실행하면 JS가 함수 onLoginSubmit를 실행
   여기서 중요한 것은 개발자는 event를 함수onLoginSubmit에게 toss만 시켜놓고, 실제로 유저가 event(예를들어 click)을 실행하면 자바스크립트 엔진이 함수onLoginSubmit 직접 실행시킨다.

3. preventDefault()로 event(submit)의 기본 동작인 새로고침이 발생하지 않는다.

---

📌링크의 기본 동작

브라우저는 링크를 클릭할 때 해당 사이트로 이동하도록 설정되어 있기 때문에 링크의 기본 동작은 클릭 시 다른 페이지로 이동하는 것이다. 링크의 기본 동작인 다른 페이지로 이동하는 것을 막아보는 코드를 작성 해 보자.

const link = documnet.querySelector("a"); // HTML에서 링크 찾기

function handleLinkClick(event) {
    event.preventDefault();
    alert("click!");
}

link.addEventListener("click", handleLinkClick);

• 순서

click event를 만들고 함수 handleLinkClick에게 event toss -> event가 실행되면 함수 handleLinkClick 실행

addEventListener의 두번째 argument 자리에 handleLinkClick()가 아닌 handleLinkClick를 쓴다. 그 이유는, ()를 추가하면 한번만 실행되고 끝이지만, 우리는 한번 실행되는 일회성을 원하지 않기 때문에 JS한테 handleLinkClick라는 함수의 이름만 건내주고 event가 실행되면, JS가 직접 함수 handleLinkClick를 실행한다.

JS가 함수를 실행시키는 동시에 그 함수의 첫번째 인자로 object(위 코드에서 'event'자리)를 넣어준다.
그리고 이 object에는 방금 일어난 event에 대한 여러 정보가 담겨있다. (예를 들어, 유저가 스크린상 클릭한 위치를 X, Y 좌표로 알려주는 등)

preventDefault()가 실행되면 click event가 발생해도, click의 기본 동작(해당 페이지로 이동)이 실행되지 않는다.

⭐ 가장 중요한건 addEventListener 안에 있는 함수 handleLinkClick의 실행(즉, handleLinkClick()은 개발자가 내가 직접 실행하는 것이 아니라 자바스크립트 엔진이 직접 해주는 것이다.