December 2, 2021

상당수 이벤트는 발생 즉시 브라우저에 의해 특정 동작을 자동으로 수행합니다.

예시:

• 링크를 클릭하면 해당 URL로 이동합니다.
• 폼 전송 버튼을 클릭하면 서버에 폼이 전송됩니다.
• 마우스 버튼을 누른 채로 글자 위에서 커서를 움직이면 글자가 선택됩니다.

그런데 어떨 때는 이런 브라우저 기본 동작 대신에 자바스크립트를 사용해 직접 동작을 구현해야 하는 경우가 생깁니다.

브라우저 기본 동작 막기

브라우저 기본 동작을 취소할 수 있는 방법은 두 가지가 있습니다.

• 첫 번째 방법은 event 객체를 사용하는 것입니다. 이때 event 객체에 구현된 event.preventDefault() 메서드를 사용합니다.
• 핸들러가 addEventListener가 아닌 on<event>를 사용해 할당되었다면 false를 반환하게 해 기본 동작을 막을 수도 있습니다.

요약

각 이벤트에 대응하는 브라우저 기본 동작은 다음과 같습니다.

• mousedown – 마우스가 움직인 곳에서 선택을 시작합니다.

• <input type="checkbox">를 click – input을 선택/선택해제 합니다.

• submit – 폼 안에서 <input type="submit">을 클릭하거나 를 누르면 이 이벤트가 발생하고, 브라우저는 폼을 서버로 전송합니다.

  Enter

• keydown – 키를 누르면 텍스트 박스에 글자를 추가하거나 그 외의 다른 동작을 수행합니다.

• contextmenu – 마우스 오른쪽 버튼을 클릭하면 발생하는 이벤트로, 브라우저 컨텍스트 메뉴를 보여줍니다.

• 이 외의 다양한 기본 동작이 있습니다.