DOM 조작을 위한 JavaScript 이벤트 리스너 활용하기

웹 개발을 배우는 여러분, 화면에서 사용자의 행동에 반응하는 웹 페이지를 만들고 싶으신가요? 그렇다면, JavaScript의 이벤트 리스너를 활용하는 방법을 알아야 합니다. 이벤트 리스너를 사용하면 사용자가 버튼을 클릭하거나 키보드를 누를 때 같은 행동에 반응하여 코드를 실행할 수 있습니다. 이번 포스트에서는 DOM(Document Object Model) 조작을 위한 JavaScript 이벤트 리스너 활용 방법을 간단하게 알아보겠습니다.

이벤트 리스너란?

이벤트 리스너는 특정 이벤트가 발생했을 때 실행되는 함수입니다. 예를 들어, 웹 페이지에 있는 버튼을 클릭하면 특정 작업을 수행하도록 설정할 수 있습니다. 이벤트 리스너를 사용하면 사용자의 행동에 따라 동적인 웹 페이지를 만들 수 있습니다.

기본적인 이벤트 리스너 사용법

JavaScript에서 이벤트 리스너를 추가하는 가장 기본적인 방법은 addEventListener 메소드를 사용하는 것입니다. 아래는 버튼 클릭 이벤트에 대응하여 메시지를 콘솔에 출력하는 간단한 예제입니다.

document.getElementById("myButton").addEventListener("click", function() {
  console.log("버튼이 클릭되었습니다!");
});

이 코드는 "myButton"이라는 ID를 가진 요소를 찾아 클릭 이벤트가 발생하면 콘솔에 "버튼이 클릭되었습니다!"라는 메시지를 출력합니다.

이벤트 리스너를 활용한 DOM 조작

이벤트 리스너는 단순히 메시지를 출력하는 것 이상으로 활용될 수 있습니다. 예를 들어, 사용자가 버튼을 클릭할 때마다 페이지의 배경색을 변경하고 싶다면 다음과 같이 할 수 있습니다.

document.getElementById("changeColorButton").addEventListener("click", function() {
  document.body.style.backgroundColor = "lightblue";
});

이 코드는 "changeColorButton"이라는 ID를 가진 버튼이 클릭될 때마다 페이지의 배경색을 연한 파란색으로 변경합니다.

정리

이벤트 리스너는 웹 개발에서 매우 중요한 개념입니다. 사용자의 행동에 반응하여 동적인 웹 페이지를 만들기 위해 필수적으로 알아야 할 기능입니다. 오늘 소개한 기본적인 예제들을 통해 JavaScript의 이벤트 리스너를 활용하는 방법을 조금이나마 이해하셨기를 바랍니다. 웹 개발을 배우는 여정에서 이벤트 리스너를 적극적으로 활용하여 사용자 친화적인 웹 페이지를 만들어 보세요!