HTML과 JavaScript로 작업하다 보면 이벤트 핸들러를 자주 다루게 됩니다. 사용자 상호 작용에 따른 동작을 정의하기 위해 이벤트 핸들러를 할당하고, 때로는 이벤트의 기본 동작을 막기 위해 preventDefault() 메서드를 사용해야 할 때도 있습니다.

이벤트 핸들러는 특정 이벤트가 발생했을 때 실행할 JavaScript 코드를 지정하는 역할을 합니다. 대표적인 이벤트 핸들러로는 click, submit, change, keydown 등이 있습니다.

preventDefault() 메서드는 기본적으로 이벤트의 기본 동작을 취소하는 역할을 합니다. 예를 들어, <a> 태그를 클릭했을 때 발생하는 기본적인 페이지 이동 동작을 막고 싶을 때 preventDefault() 메서드를 사용할 수 있습니다.

아래는 간단한 예제 코드입니다.

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault();
  // 추가로 실행할 코드
});

위 예제에서는 <a> 태그를 클릭하면 기본 페이지 이동 동작을 없애고 추가적인 JavaScript 코드를 실행하도록 preventDefault() 메서드를 활용한 것을 볼 수 있습니다.

preventDefault() 메서드는 특히 폼 제출(submit) 이벤트에서 유용하게 활용됩니다. 폼이 제출되기 전에 필요한 유효성 검사를 수행하거나 Ajax를 통한 서버 요청을 처리하기 위해 주로 사용됩니다.

preventDefault() 메서드를 사용하는 것은 사용자 경험을 개선하고 의도치 않은 동작을 방지하는 데 도움이 됩니다.

이벤트 핸들러와 preventDefault() 메서드를 적절히 활용하여 사용자와 상호 작용하는 웹 애플리케이션을 개발하는 데 도움이 됩니다.