[JS] input, form, link in HTML JS, JS를 이용해서 브라우저의 기본 동작 막기, event에 대한 정보 확인하기, addEventListener, preventDefault 함수

 

HTML에서 input 활용 방법

 

const loginButton = document.querySelector("#login-form button");

function onLoginBtnClick() {
    const username = loginInput.value;
    if(username === "") {
        alert("Please write your name.");
    } else if(username.length > 15) {
        alert("Your name is too long.")
    }
    console.log(username);
}

loginButton.addEventListener("click", onLoginBtnClick);

<form id="login-form">
    <input required maxlength="15" type="text" placeholder="What is your name?" />
    <button>Log In</button>
</form>

맨 위 JS에서 input을 제어하는 대신 그 아래 HTML에서 input 활용 가능하다. 대신 input이 form 안에 있어야 유효하다.

(required 필수입력항목, maxlength 최대글자수)

form의 기본동작은 submit이다. 브라우저는 엔터를 누를 때 새로고침을 하고 form을 submit하도록 프로그래밍 되어있다.

form 안에 enter를 누르고 input이 더이상 존재하지 않는다면 자동으로 submit 되고,

form 안에 버튼을 눌렀을 때도 자동으로 submit 된다.

JS는 우리가 기본동작을 막는 것을 허용하기 때문에 form의 기본동작을 막을 수 있다.

 

 

form의 기본동작 막기(새로고침 하지 않고 username 저장)

 

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

function onLoginSubmit(event) {        // argument 적어줌
    event.preventDefault();            // preventDefault 기본동작을 막아주는 함수
    console.log(loginInput.value);     // input에 적은 내용 console에서 확인
}

loginForm.addEventListener("submit", onLoginSubmit);     //submit event 추가

form의 기본동작인 submit을 막아야하기 때문에 submit event 추가로 submit을 제어할 것이다.

함수에 argument 추가 후 preventDefault 함수 적용하면 어떤 event의 기본 행동(어떤 function에 대해 브라우저가 기본적으로 수행하는 동작)이든지 발생되지 않게 막는다.

submit event가 발생할 때 JS는 onLoginSubmit function을 호출하고 있고, 이 때 event object를 argument로 주고 있고, preventDefault함수로 기본동작이 실행되는 걸 막아주고 있다.

 

 

link의 기본 동작 막아보기

 

link의 기본 동작은 클릭 시 다른 페이지로 이동하는 것이다.

<a href="https://google.com">Go to google</a>

const link = document.querySelector("a");

function handleLinkClick(event) {
    event.preventDefault();
}

link.addEventListener("click", handleLinkClick);

JS에서 click event를 추가해서 click을 제어하고, handleLinkClick 함수 추가해주었다.

handleLinkClick 함수에 argument 추가 후 preventDefault 함수를 적용하니 link 클릭해도 페이지 이동하지 않는다.

 

 

event에 대한 정보 확인하기

 

JS는 addEventListener 함수를 실행시키는 동시에 그 함수에 첫 번째 인자로 object를 넣어둘 것이다.

그 object에는 방금 일어난 event에 대한 여러 정보가 담겨 있다.

우리는 공간만 만들고 그 정보를 받으면 되기 때문에 정보를 받을 argument 추가 후 console.log(event) 해주고 확인하면 된다. (argument에 event 적는 것은 관행이고 다른 이름 넣어도 가능)

const link = document.querySelector("a");

function handleLinkClick(event) {
    event.preventDefault();
    console.log(event);
}

link.addEventListener("click", handleLinkClick);

 

 

*노마드코더 강의 '바닐라 JS로 크롬 앱 만들기' 참고*