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 태그를 찾고, 여기에 addEventListner로 submit 이벤트가 발생했을 때 이벤트를 콘솔에 찍을 수 있도록 함수를 추가했습니다.
여기서 preventDefault가 없다면 submit 버튼을 눌렀을 때 console창에 log가 뜨고 바로 사라지게 됩니다.
왜냐하면 submit을 누르면 페이지가 새로 고침 되는 것이 기본 동작이기 때문인데요,
하지만 위처럼 preventDefault를 사용하면 새로 고침이 실행되지 않아서 event log를 볼 수 있습니다.
preventDefault checkbox 예제
checkbox의 기본 동작은 클릭했을 때 체크 박스가 토글 되는 것입니다. checkbox에 preventDefault를 사용하면 체크 박스를 눌러도 반응이 없게 구현할 수 있습니다.
<!--js-->
document.getElementById('checkbox').addEventListner('click',event =>{
event.preventDefault()}
);preventDefault, stopPropagation 차이
preventDefault는 브라우저가 기본 동작을 계속하지 못하게 막고,stopPropagation은 다른 이벤트 핸들러가 동일한 이벤트 처리를 하지 못하도록 합니다 (버블링을 막아줍니다).
웹 퍼블리셔의 코딩 일기