이벤트 처리는 웹 개발에서 매우 중요한 개념입니다. JavaScript를 이용하여 웹 페이지에서 발생하는 이벤트를 처리할 수 있습니다. 이번 포스트에서는 JavaScript를 사용하여 이벤트를 처리하는 방법에 대해 알아보겠습니다.

이벤트 리스너

JavaScript에서 이벤트를 처리하기 위해 이벤트 리스너를 사용합니다. 이벤트 리스너는 특정 이벤트가 발생했을 때 실행될 함수를 등록하는 역할을 합니다.

const button = document.querySelector('#myButton');

button.addEventListener('click', function() {
  console.log('버튼이 클릭되었습니다.');
});

위의 코드는 id가 “myButton”인 버튼에 click 이벤트 리스너를 등록하는 예시입니다. 버튼을 클릭할 때마다 콘솔에 “버튼이 클릭되었습니다.”라는 메시지가 출력됩니다.

이벤트 객체

이벤트 리스너 함수는 자동으로 이벤트 객체를 인자로 받을 수 있습니다. 이벤트 객체는 이벤트에 대한 추가 정보를 담고 있으며, 이 정보를 활용하여 원하는 작업을 수행할 수 있습니다.

const button = document.querySelector('#myButton');

button.addEventListener('click', function(event) {
  console.log('버튼이 클릭되었습니다.');
  console.log('클릭된 위치: ', event.clientX, event.clientY);
});

위의 코드는 클릭된 버튼의 위치를 콘솔에 출력하는 예시입니다. event.clientX와 event.clientY를 이용하여 마우스 클릭된 위치의 X 좌표와 Y 좌표를 알 수 있습니다.

기본 동작 제어

이벤트 리스너 함수 내에서 event.preventDefault() 메서드를 사용하여 기본 동작을 막을 수 있습니다. 예를 들어, 폼 제출을 막아서 페이지를 새로고침하지 않고도 작업을 처리할 수 있습니다.

const form = document.querySelector('#myForm');

form.addEventListener('submit', function(event) {
  event.preventDefault();
  
  console.log('폼이 제출되었습니다.');
  // 폼 제출 처리 코드 작성
});

위의 코드는 폼 제출 시 새로고침을 막고, 폼이 제출되었다는 메시지를 콘솔에 출력하는 예시입니다. event.preventDefault() 메서드를 사용함으로써 기본 동작을 제어할 수 있습니다.

추가 자료

더 자세한 내용과 다양한 이벤트 처리 방법에 대해서는 다음 자료를 참고할 수 있습니다:

• MDN Web Docs - 이벤트