[JavaScript] 브라우저 기본 동작 제어하기 - preventDefault()

이번 글은 브라우저 기본 동작이 실행되는 것을 막는 법에 대한 글이다.

---

 

[ 브라우저 기본 동작 ]

브라우저에서 html 요소들에 의해 기본적으로 실행되는 기본동작들이 있다.

=> ex. href 속성에 넣은 링크로 자동으로 연결되는 것

=> ex. input태그에 글씨를 입력할 수 있는 기능

 

---

 

[ preventDefault() ]

아래 코드와 같이 작성해주면 원하는 부분에 브라우저의 기본동작을 실행하지 못하게 해줄 수 있다.

=> 코드 설명 : input 태그에 적용할 이벤트로 키보드가 눌렸을 때 체크박스가 체크된 상태가 아니라면 기본 동작을 실행하지 않고 경고창을 띄운다.

=> preventDefault()는 파라미터로 아무 값도 전달하지 않고 소괄호만 작성 후 호출

input.addEventListener('keydown', function(e) {
	if (!checkbox.checked) {
    	e.preventDefault();
        alert('체크박스를 먼저 클릭해주세요');
    }
});

 

 

---