JS에서 HTML 기본동작 막기 - preventDefault()

 

 

저번 시간에는 JS에서 css에 정의된 클래스들을 사용해서 HTML의 element들을 만져봤다.

 

오늘은 <form>(새로고침)이나 <a>(페이지 이동)태그들의 기본동작들을 막는 함수를 살펴봤다.

 

1. 해당하는 element들에게 addEventListenr를 추가해준다.

 

[index.js]

 

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

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

function onLoginSubmit(info) {
    info.preventDefault();
    const username = loginInput.value;
    console.log(username)
}

function handleLinkClick(info){
    console.log(info)
    info.preventDefault();

    alert('clicked')
}

loginForm.addEventListener('submit', onLoginSubmit);
link.addEventListener('click', handleLinkClick);

 

2. addEventListener에 정의된 함수 인자로 아무 변수나 지정해준다.

 

[index.js]

function onLoginSubmit(info) {
    info.preventDefault();
    const username = loginInput.value;
    console.log(username)
}

 

addEventListener가 loginForm.addEventListener('submit', onLoginSubmit); 를 실행할 때,
onLoginSubmit함수 첫 번째 인자에 정보를 전달해준다.

 

3. 전달받은 인자의 함수 preventDefault()를 실행해주면 html의 기본동작을 막을 수 있다.

 

[index.js]

function onLoginSubmit(info) {
    info.preventDefault();
    const username = loginInput.value;
    console.log(username)
}

 

이렇게 되면 <form>태그를 submit 해도 페이지가 새로고침되지 않는다.

Ref: https://nomadcoders.co/javascript-for-beginners