preventDefault는 브라우저가 적용하는 기본 동작을 방지하는 역할을 합니다.
이때 기본 동작은 이벤트의 종류에 따라 다릅니다.
submit
인 경우 form
데이터를 서버에 전송하고,a
의 경우 link
이벤트로 해당하는 링크로 이동하는 것이 기본 동작checkbox
에서 클릭하면 박스 toggling이 되면서 체크가 되는 부분이 기본 동작이렇게 기본 동작이 정해져 있기 때문에
click
이벤트와 같이 이벤트 적용이 불가합니다!!
<!--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를 적용하는 예제입니다.
<!--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를 볼 수 있습니다.
checkbox의 기본 동작은 클릭했을 때 체크 박스가 토글 되는 것입니다. checkbox
에 preventDefault
를 사용하면 체크 박스를 눌러도 반응이 없게 구현할 수 있습니다.
<!--js-->
document.getElementById('checkbox').addEventListner('click',event =>{
event.preventDefault()}
);
preventDefault
는 브라우저가 기본 동작을 계속하지 못하게 막고,stopPropagation
은 다른 이벤트 핸들러가 동일한 이벤트 처리를 하지 못하도록 합니다 (버블링을 막아줍니다).