DOM 조작을 위한 JavaScript 이벤트 핸들링 🖱️

웹 개발을 배우는 여러분, 화면에서 일어나는 다양한 사건들을 어떻게 다루는지 궁금하신가요? 오늘은 바로 그 비밀, JavaScript를 사용한 DOM(Document Object Model) 조작과 이벤트 핸들링에 대해 알아보겠습니다. 복잡해 보일 수 있는 개념이지만, 함께 차근차근 풀어보아요!

이벤트 핸들링이란?

간단히 말해, 이벤트 핸들링은 사용자가 웹 페이지에서 어떤 동작을 취했을 때(예: 클릭, 스크롤, 키보드 입력 등), 그에 반응하여 특정 작업을 실행하는 과정입니다. JavaScript를 사용하면 이러한 이벤트들을 감지하고, 원하는 동작을 쉽게 만들어낼 수 있습니다.

기본 예제: 버튼 클릭 이벤트

먼저, HTML에서 버튼을 하나 만들어 보겠습니다.

<button id="clickMeButton">클릭하세요!</button>

이제, JavaScript를 사용하여 이 버튼에 클릭 이벤트를 추가해 보겠습니다.

// 버튼 요소를 찾아서 변수에 저장합니다.
const button = document.getElementById('clickMeButton');

// 버튼에 'click' 이벤트 리스너를 추가합니다.
button.addEventListener('click', function() {
  alert('버튼이 클릭되었습니다!');
});

위 코드는 매우 간단합니다. 먼저, getElementById를 사용하여 HTML에서 버튼 요소를 찾고, addEventListener 메서드를 사용하여 클릭 이벤트를 감지합니다. 사용자가 버튼을 클릭하면, alert 함수가 호출되어 메시지를 표시합니다.

이벤트 핸들링의 다양한 사용

이벤트 핸들링은 단순한 클릭 이벤트뿐만 아니라, 다양한 방식으로 활용될 수 있습니다. 예를 들어, 사용자가 입력 필드에 텍스트를 입력할 때마다 그 내용을 검증하거나, 스크롤 이벤트에 반응하여 특정 애니메이션을 실행할 수도 있습니다.

실습: 입력 필드 값 변경 감지하기

사용자가 입력 필드에 무언가를 입력할 때마다 그 값을 콘솔에 출력해 보겠습니다.

<input type="text" id="textInput">

// 입력 필드 요소를 찾아서 변수에 저장합니다.
const inputField = document.getElementById('textInput');

// 입력 필드에 'input' 이벤트 리스너를 추가합니다.
inputField.addEventListener('input', function(event) {
  // 현재 입력 필드의 값을 콘솔에 출력합니다.
  console.log(event.target.value);
});

위 코드는 사용자가 입력 필드에 무언가를 입력할 때마다, 그 값을 실시간으로 콘솔에 출력합니다. event.target.value를 통해 현재 입력 필드의 값을 얻을 수 있습니다.

이처럼 JavaScript의 이벤트 핸들링을 통해, 웹 페이지의 동적인 상호작용을 구현할 수 있습니다. 시작하기에 앞서 복잡해 보일 수 있지만, 기본적인 예제들로 연습하다 보면 자연스럽게 익숙해질 거예요. 여러분도 지금 바로 도전해 보세요!