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

작성: 2024년 07월 23일읽기: 약 3분

웹 개발에서 DOM(Document Object Model)을 조작하는 것은 웹 페이지의 동적인 요소를 만들기 위해 필수적입니다. 이번 포스팅에서는 JavaScript 이벤트 리스너를 활용하여 DOM을 어떻게 조작할 수 있는지 쉽게 설명하고자 합니다.

이벤트 리스너란?

간단히 말해, 이벤트 리스너는 웹 페이지에서 발생하는 특정 이벤트(예: 클릭, 키보드 입력, 마우스 오버 등)를 감지하고, 그 이벤트가 발생했을 때 실행될 함수를 지정하는 방법입니다. 이를 통해 사용자의 행동에 반응하는 인터랙티브한 웹 페이지를 만들 수 있습니다.

기본 예제

HTML 요소에 이벤트 리스너를 추가하는 기본적인 방법을 살펴보겠습니다. 가장 흔한 예로, 버튼을 클릭했을 때 특정 작업을 수행하는 경우를 들 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <title>이벤트 리스너 예제</title>
</head>
<body>

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

<script>
    // 버튼 요소를 찾습니다.
    var button = document.getElementById("myButton");

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

</body>
</html>

이 예제에서는 getElementById를 사용하여 HTML 문서 내의 버튼 요소를 찾고, addEventListener 메소드를 사용하여 클릭 이벤트에 대한 리스너를 추가했습니다. 사용자가 버튼을 클릭하면, alert 함수가 실행되어 메시지를 표시합니다.

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

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

<!DOCTYPE html>
<html>
<head>
    <title>배경색 변경 예제</title>
</head>
<body>

<button id="changeColorButton">배경색 변경</button>

<script>
    var button = document.getElementById("changeColorButton");

    button.addEventListener("click", function() {
        // body의 배경색을 변경합니다.
        document.body.style.backgroundColor = "lightblue";
    });
</script>

</body>
</html>

이 예제에서는 버튼 클릭 이벤트에 반응하여 document.body.style.backgroundColor 속성을 수정함으로써 페이지의 배경색을 변경합니다.

결론

JavaScript 이벤트 리스너는 웹 페이지에 동적인 요소를 추가하는 강력한 도구입니다. 사용자의 행동에 반응하는 인터랙티브한 웹 페이지를 만들기 위해, 이벤트 리스너를 활용하여 DOM을 조작하는 방법을 이해하는 것이 중요합니다. 이번 포스팅을 통해 기본적인 이벤트 리스너의 사용 방법과 DOM 조작 예제를 살펴보았습니다. 웹 개발을 배우는 과정에서 이러한 기술을 활용하여 다양한 웹 애플리케이션을 만들어 보세요.