[이벤트 살펴보기] 12. 브라우저의 기본 동작

// 브라우저의 기본 동작
const link = document.querySelector('#link');
const checkbox = document.querySelector('#checkbox');
const input = document.querySelector('#input');
const text = document.querySelector('#text');

대부분의 이벤트는 발생하는 순간 각 태그별로 혹은 문서 전체적인 측면에서 브라우저가 기본적으로 갖고 있는 어떤 동작들을 수행합니다. 예를 들어서 a 태그는 다른 태그와 다르게 클릭을 했을 때 href 속성에 담긴 주소로 웹 페이지가 이동하고 input 태그의 경우에도 타입별로 다양한 동작들이 있지만 체크박스는 클릭을 했을 때 체크가 토글 되고 텍스트 타입은 클릭했을 때 태그에 포커스가 되고 커서가 깜빡이면서 입력이 가능한 상태를 알려주기도 합니다.

그리고서 이 상태로 키보드를 누르면 누른 키보드에 해당하는 값을 그대로 입력해줍니다.

이뿐만 아니라 그냥 일반 텍스트 위에서도 마우스를 드래그하게 되면 하늘색으로 글자가 선택된다거나 마우스 오른쪽 클릭을 하면 이렇게 옵션 창이 뜨는 것도 모든 브라우저가 기본적으로 수행하는 동작들이라고 할 수 있습니다.

 

이 밖에도 브라우저가 기본적으로 가지고 있는 다양한 동작들이 더 있지만 상황에 따라 기본동작을 원하지 않을 수도 있습니다. 가장 쉽게 접해볼 수 있었던 상황이 블로그 같은 사이트에서 마우스 오른쪽 클릭을 방지하는 기능입니다.

JavaScript를 이런 브라우저의 기본 동작들을 막을 수가 있습니다.

 

바로 이벤트 객체에 preventDefault라는 메소드를 활용하는 것입니다.

a 태그의 경우에는 클릭했을 때 href 속성의 주소로 이동하는 거니까 클릭 타입의 이벤트 핸들러를 한번 만들어보면 이렇게 preventDefault 메소드를 이용해서 브라우저의 기본적인 동작을 막고 경고 창을 띄우는 코드인데 코드를 저장하고 실행해보면 링크를 클릭했을 때 이동하는 게 아니라 지금은 이동할 수 없다라는 경고창이 뜨는 것을 확인할 수 있습니다.

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

이 키보드 이벤트는 if문을 활용해서 특정한 상황에서만 기본동작을 막는데, 체크박스가 체크되지 않으면 input 태그에서 키가 입력되지 않게 하는 겁니다. 저장하고 실행해보면 input 태그에서 키를 바로 입력하면 경고창이 뜨고 입력이 되지 않습니다. 그런데 체크박스를 체크한 상태에서 키를 입력하면 입력이 잘 되는 모습을 확인할 수 있습니다.

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

마지막으로 마우스 우클릭 방지는 마우스 오른쪽 클릭으로 컨텍스트 메뉴라는 타입으로 이벤트가 발생합니다. 그래서 텍스트에 컨텍스트 메뉴 타입으로 이벤트 핸들러를 등록할 때 브라우저의 기본동작을 막고 경고 창을 띄우게 되면 코드를 저장하고 실행했을 때 다른 곳에서는 오른쪽 클릭이 잘 되지만 텍스트 위에서는 경고 창이 뜨는 것을 확인할 수 있습니다. 만약 문서 전체에 마우스 오른쪽 클릭을 막고 싶다면 text가 아닌 document 객체에 할당해 주면 됩니다.

저장하고 실행하면 모든 곳에서 오른쪽 클릭이 막힌 것을 확인할 수 있습니다.

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