1. 브라우저의 기본 동작

event 객체에 preventDefault method를 활용하면, 브라우저의 기본 동작을 막을 수 있다.

아래 예시 코드의 경우, 링크를 클릭했을 때 다른 주소로 이동되지 않고, 경고창을 띄울 수 있다.

const link = document.querySelector('#link');

link.addEventListener('click', function(e) {
	e.preventDefault();
	alert('지금은 이동할 수 없습니다.');
});

아래 예시와 같이, if 문을 활용하면, 특정 상황에서만 기본 동작을 막도록 설정할 수도 있다.

이 경우에는, checkbox에 체크가 되지 않으면, input 태그에서 키가 입력되지 않도록 하는 코드이다.

const checkbox = document.querySelector('#checkbox');
const input = document.querySelector('#input');

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

아래 예시 코드는, 텍스트 위에서 마우스 우클릭을 했을 경우, 경고창을 띄우는 코드이다.

만약, 특정 구역이 아닌 문서 전체에 대한 마우스 우클릭을 막고 싶다면, text 객체를 document 객체로 바꿔주면 된다.

const text = document.querySelector('#text');

text.addEventListener('contextmenu', function(e) {
	e.preventDefault();
	alert('마우스 오른쪽 클릭은 사용할 수 없습니다.');
});

💡 브라우저의 기본 동작을 막는 것은 꼭 필요할 때에만 활용을 해야 한다. 특히, HTML 태그에 존재하는 브라우저의 기본 동작들을 다루는 경우에는, 각 HTML 태그들이 가지고 있는 고유한 역할과 의미를 훼손하게 될 수도 있다는 점을 주의하자.