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

웹 개발의 세계에서, DOM(Document Object Model)은 웹 페이지의 구조를 나타냅니다. 이 구조를 통해 JavaScript는 웹 페이지의 요소를 동적으로 조작할 수 있습니다. 오늘은 이러한 DOM 조작을 위한 JavaScript 이벤트 핸들링에 대해 알아보겠습니다. 이해하기 쉽도록 어려운 기술적 용어는 사용하지 않겠습니다.

이벤트 핸들링이란?

간단히 말해, 이벤트 핸들링은 사용자의 행동(클릭, 스크롤, 키보드 입력 등)에 반응하여 코드를 실행하는 방법입니다. 웹 페이지에서 사용자의 상호작용을 감지하고, 그에 따라 특정 작업을 수행하게 하는 것이죠.

기본 예제

JavaScript를 사용하여 간단한 클릭 이벤트를 처리하는 방법을 보여드리겠습니다. 이 예제에서는 버튼을 클릭할 때마다 콘솔에 메시지가 출력되도록 설정합니다.

// HTML 요소를 찾습니다.
const myButton = document.getElementById('myButton');

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

위 코드에서 getElementById는 ID가 'myButton'인 HTML 요소(이 경우 버튼)를 찾습니다. 그리고 addEventListener는 해당 요소에 클릭 이벤트가 발생했을 때 실행할 함수를 정의합니다.

DOM 요소 변경하기

이벤트 핸들링을 사용하여 DOM 요소의 내용을 변경해보겠습니다. 예를 들어, 버튼을 클릭하면 텍스트 내용이 변경되는 경우입니다.

// HTML 요소를 찾습니다.
const myButton = document.getElementById('changeTextButton');
const myText = document.getElementById('myText');

// 클릭 이벤트 리스너를 추가합니다.
myButton.addEventListener('click', function() {
  myText.textContent = '텍스트가 변경되었습니다!';
});

이 예제에서는 두 개의 요소를 찾습니다: 버튼과 변경될 텍스트를 포함하는 요소입니다. 버튼을 클릭하면, 텍스트 요소의 textContent 속성을 사용하여 내용을 변경합니다.

정리

JavaScript의 이벤트 핸들링을 통해 사용자의 상호작용에 반응하여 동적인 웹 페이지를 만들 수 있습니다. 이벤트 리스너를 추가하고, DOM 요소를 조작하는 방법을 이해하는 것은 웹 개발에서 매우 중요합니다. 오늘 배운 내용을 실습해보면서 웹 페이지를 더욱 생동감 있게 만들어보세요!