자바스크립트 이벤트 타입: 다양한 이벤트 종류와 사용 방법

이벤트란 무엇인가?

이벤트는 웹 페이지에서 발생하는 사용자 상호작용이나 브라우저 자체에서 발생하는 동작을 나타냅니다. 사용자가 버튼을 클릭하거나 키보드로 입력하는 것은 일부 이벤트의 예입니다. 자바스크립트는 이러한 이벤트에 대한 응답을 처리할 수 있습니다.

이벤트 타입

자바스크립트에서는 다양한 이벤트 타입이 정의되어 있으며, 각각의 이벤트들은 이벤트 대상과 함께 사용됩니다. 이벤트를 등록하기 위해서는 이벤트 대상과 이벤트 핸들러 함수를 인자로 넘겨주어야 합니다.

클릭 이벤트

const button = document.querySelector('#myButton');
button.addEventListener('click', function(event) {
  console.log('Button clicked!');
});

위 예제에서는 `#myButton`을 대상으로 클릭 이벤트를 추가하고, 클릭할 때마다 콘솔에 ‘Button clicked!’ 메시지를 출력합니다.

폼 제출 이벤트

const form = document.querySelector('#myForm');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('Form submitted!');
});

위 예제에서는 `#myForm`을 대상으로 폼 제출 이벤트를 추가하고, 폼을 제출할 때마다 콘솔에 ‘Form submitted!’ 메시지를 출력합니다. `event.preventDefault()`는 폼이 기본 동작을 수행하지 않도록 막습니다.

키 이벤트

const input = document.querySelector('#myInput');
input.addEventListener('keydown', function(event) {
  console.log(`Key pressed: ${event.key}`);
});

위 예제에서는 `#myInput`을 대상으로 키 다운 이벤트를 추가하고, 키를 누를 때마다 어떤 키가 눌렸는지를 출력합니다.

결론

자바스크립트 이벤트 타입은 다양한 웹 상호작용에서 사용할 수 있으며, 각 이벤트에 맞는 이벤트 핸들러를 등록하여 원하는 동작을 처리할 수 있습니다.

자바스크립트 이벤트 타입은 웹 페이지의 상호작용과 브라우저의 동작을 제어하는 데 중요한 개념입니다. 이를 활용하여 사용자들과 더 나은 웹 환경을 만들 수 있습니다.