자바스크립트 preventDefault 정리
이번 포스팅은 JavaScript preventDefault를 사용하는 이유에 대한 내용입니다.
preventDefault 역할
preventDefault는 브라우저가 적용하는 기본 동작을 방지하는 역할을 합니다. 이때 기본 동작은 이벤트의 종류에 따라 다릅니다. submit인 경우 form 데이터를 서버에 전송하고, 페이지를 새로 고침 하는 부분이 기본 동작입니다. link의 경우는 해당하는 링크로 이동하는 것이 기본 동작, checkbox에서 클릭하면 박스 togglig이 되면서 체크가 되는 부분이 기본 동작입니다. 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 파일
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를 사용하면 체크 박스를 눌러도 반응이 없게 구현할 수 있습니다.
document.getElementById('checkbox').addEventListner('click',event =>{
event.preventDefault()}
);preventDefault, stopPropagation 차이
preventDefault는 브라우저가 기본 동작을 계속하지 못하게 막고, stopPropagation은 다른 이벤트 핸들러가 동일한 이벤트 처리를 하지 못하도록 합니다 (버블링을 막아줍니다).
'컴퓨터 IT > Javascript' 카테고리의 다른 글
| ESLint 쉬운 설치 방법 (0) | 2023.02.20 |
|---|---|
| 자바스크립트 Bubbling (0) | 2022.12.19 |
| 자바스크립트 버튼 클릭 이벤트 추가하는 3가지 방법 (0) | 2022.12.16 |
| 자바스크립트 getElementById, querySelector 차이점 (0) | 2022.12.11 |
| 자바스크립트 static의 모든 것 (0) | 2022.12.03 |