JS preventDefault

김종민·2023년 7월 25일
0

js

목록 보기
8/25
post-thumbnail

preventDefault 역할

preventDefault는 브라우저가 적용하는 기본 동작을 방지하는 역할을 합니다.

이때 기본 동작은 이벤트의 종류에 따라 다릅니다.

  • submit인 경우 form 데이터를 서버에 전송하고,
    페이지를 새로 고침 하는 부분이 기본 동작
  • a의 경우 link 이벤트로 해당하는 링크로 이동하는 것이 기본 동작
  • checkbox에서 클릭하면 박스 toggling이 되면서 체크가 되는 부분이 기본 동작

이렇게 기본 동작이 정해져 있기 때문에
click이벤트와 같이 이벤트 적용이 불가합니다!!


하지만!!
preventDefault를 사용하면 이러한 기본 동작들을 하지 않게 합니다.✨


preventDefault submit 예제

<!--HTML-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <form>
    <lable for="title">Title</lable>
    <input type ="text" id="title">
    <button type="submit">Submit</button>
  </form>
</body>
</html>

아래처럼 생긴 HTML 예제입니다.

form submit 이벤트에 preventDefault를 적용하는 예제입니다.


JavaScript 파일

<!--js-->

const form = document.querySelector('form');
 
form.addEventListener('submit',event=> {
    event.preventDefault();
    console.log(event);
});

querySelector('form')으로 form에 해당하는 html 태그를 찾고, 여기에 addEventListnersubmit 이벤트가 발생했을 때 이벤트를 콘솔에 찍을 수 있도록 함수를 추가했습니다.
여기서 preventDefault가 없다면 submit 버튼을 눌렀을 때 console창에 log가 뜨고 바로 사라지게 됩니다.
왜냐하면 submit을 누르면 페이지가 새로 고침 되는 것이 기본 동작이기 때문인데요,

하지만 위처럼 preventDefault를 사용하면 새로 고침이 실행되지 않아서 event log를 볼 수 있습니다.



preventDefault checkbox 예제

checkbox의 기본 동작은 클릭했을 때 체크 박스가 토글 되는 것입니다. checkboxpreventDefault를 사용하면 체크 박스를 눌러도 반응이 없게 구현할 수 있습니다.

<!--js-->

document.getElementById('checkbox').addEventListner('click',event =>{
  event.preventDefault()}
);


preventDefault, stopPropagation 차이

preventDefault는 브라우저가 기본 동작을 계속하지 못하게 막고,

stopPropagation은 다른 이벤트 핸들러가 동일한 이벤트 처리를 하지 못하도록 합니다 (버블링을 막아줍니다).

profile
웹 퍼블리셔의 코딩 일기

0개의 댓글

관련 채용 정보