js) 이벤트 및 preventDefault() 함수 사용

5_hyun 2022. 4. 8. 01:41

    <div id="login-form">
        <input type="text" placeholder="what is your name?"/>
        <button>Log In</button>
    </div>

const loginForm = document.getElementById("long-form");
const loginInput = loginForm.querySelector("input");
const loginButton = loginForm.querySelector("button");

이런 방법으로 html의 버튼을 js에서 가져올 수 있다.

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

이렇게 하면 코드를 더 줄일 수 있다.

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

function onLoginBtnClck() {
    console.dir(loginInput);
    console.log("click!");
}

loginButton.addEventListener("click", onLoginBtnClck);

이렇게 구현하면 input에 사용자가 입력한 것을 알 수 있다.

<div id="login-form">
        <input type="text" value="lalalalal" placeholder="what is your name?"/>
        <button>Log In</button>
    </div>

이렇게 하면 자동적으로 input에 lalalalal이 있다.

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

function onLoginBtnClck() {
    console.log("hello", loginInput.value);
}

loginButton.addEventListener("click", onLoginBtnClck);

hello + 사용자가 입력한 값을 콘솔에 나오게 한다.

function onLoginBtnClck() {
    const username = loginInput.value;
    if (username === ""){
        alert("please write your name");
    } else if(username.length > 15) {
        alert("your name is too long.")
    }
}

이렇게 하면 입력에 조건을 추가할 수 있다.

하지만

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

html에서 required maxlength를 쓰면 html에서 제어할 수 있다. required maxlength는 반드시 form 안에서 써야한다.

저걸 쓰면 설정보다 더 긴 값은 입력할 수 없다.

html은 form 안에서 엔터를 누르고 input이 더 존재하지 않으면 자동 sumbit된다. 우리의 목표는 submit되는 순간 데이터를 저장하고 싶다.

submit는 엔터를 누르거나 버튼을 클릭할 때 발생한다.

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


function onLoginSumbit() {
    const username = loginInput.value;
   console.log(username);
}

loginForm.addEventListener("sumbit", onLoginSumbit);

이렇게 하면 form을 submit 할 때 입력하는 값을 받아낸다. 하지만 from이 submit 되는 것은 브라우저의 기본이라 막지 못하고 있다. 그래서 새로고침을 못하도록 해야한다.

()가 있다는 건 즉시 실행 시켜주는 것이다. 하지만 우린 즉시 실행하고 싶지 않다.

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


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

loginForm.addEventListener("sumbit", onLoginSumbit);

preventDefault() 함수는 브라우저에서 일어나는 기본 동작을 막아준다. 즉 form이 sumbit하는 것을 막아준다.

    <a href="https://nomadcoders.co">Go to courses</a>

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

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

function onLoginSumbit(event) {
    event.preventDefault();
    console.log(loginInput.value);
}
function handleLinkClick(event){
    console.log(event)
    alert("clicked!")
}

loginForm.addEventListener("sumbit", onLoginSumbit);
link.addEventListener("click", handleLinkClick)

html 위 같이 하고 js에 클릭하면 alert 뜨게하면 바로 링크로 넘어가지 않는다. 확인을 누르고 나면 링크로 넘어간다.

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

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

function onLoginSumbit(event) {
    event.preventDefault();
    console.log(loginInput.value);
}
function handleLinkClick(event){
    event.preventDefault();
    console.dir(event)
}

loginForm.addEventListener("sumbit", onLoginSumbit);
link.addEventListener("click", handleLinkClick)

이렇게 하면 링크로 넘어가는 것을 막아주고 정보를 콘솔에 보여준다.

<body>
    <form id="login-form">
        <input required
        maxlength="15"
        type="text" 
        placeholder="what is your name?"
        />
        <button>Log In</button>
    </form>
    <h1 id="greeting" class="hidden"></h1>
    <script src="app.js"></script>
</body>

.hidden{
    display: none;
}

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

const HIDDEN_CLASSNAME = "hidden"

function onLoginSumbit(event) {
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    //greeting.innerText="Hello " + username;
    greeting.innerText=`Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME)
}

loginForm.addEventListener("submit", onLoginSumbit);

이렇게하면 form에 입력을 하면 from이 css의 hidden 때문에 사라지고 js의

    greeting.innerText=`Hello ${username}`;

이것으로 인하여 Hello (username)이 화면에 출력된다.

저작자표시 (새창열림)