3.1 이벤트란?

약 6분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

3.1 이벤트란?

웹 페이지에서 이벤트는 사용자와의 상호작용을 나타내는 요소입니다. 사용자가 버튼을 클릭하거나 입력 필드에 텍스트를 입력하는 것과 같은 행동은 모두 이벤트로 정의됩니다. 이러한 이벤트를 통해 웹 애플리케이션은 사용자에게 응답할 수 있으며, 동적인 인터페이스를 구현할 수 있습니다.

JavaScript는 이러한 이벤트를 처리하는 강력한 기능을 갖추고 있어, 사용자의 상호작용에 따라 다양한 동작을 수행할 수 있습니다.

예제

다음의 예제를 통해 버튼 클릭 이벤트를 처리하는 방법을 살펴보겠습니다. 아래 코드는 버튼을 클릭할 때마다 메세지를 알림창으로 표시합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트 처리 예제</title>
    <style>
        body { font-family: Arial, sans-serif; }
        button { padding: 10px 20px; font-size: 16px; }
    </style>
</head>
<body>
    <button id="myButton">클릭하세요!</button>
    <script>
        // 버튼 클릭 이벤트를 처리합니다.
        const button = document.getElementById('myButton');
        button.addEventListener('click', () => {
            alert('버튼이 클릭되었습니다!');
        });
    </script>
</body>
</html>

실습

위의 예제를 바탕으로, 버튼을 클릭할 때마다 HTML 요소의 텍스트를 변경하도록 만들어 보세요. 아래의 코드를 참고하여 실습하세요.

버튼 아래에 빈 <p> 태그를 추가합니다.
버튼 클릭 시 이 <p> 태그의 텍스트를 변경하는 기능을 추가합니다.

응용

이벤트를 활용하여 색상 변경 버튼을 만들어보세요. 사용자가 버튼을 클릭할 때마다 배경색이 변경되는 기능을 구현합니다. 이 경험은 이벤트와 DOM 조작에 대한 이해를 돕습니다.

버튼 두 개를 추가하여 각각 "파란색", "초록색"이라는 색상을 설정합니다.
클릭할 때의 배경색을 JavaScript를 사용하여 변경합니다.

정리

이번 섹션에서는 이벤트의 개념과 기본적인 이벤트 처리 방법에 대해 배웠습니다. 다양한 종류의 이벤트와 각각의 특징을 이해하고, 이벤트 리스너를 활용하여 사용자와의 상호작용을 처리할 수 있는 기본기를 다졌습니다. 이후 내용에서는 더 다양한 이벤트 처리 방법과 비동기 프로그래밍에 대해서도 다룰 예정입니다.

실습 과제

버튼 클릭 시 텍스트를 변경하는 기본 프로젝트를 완성하세요.
추가적으로, 더 많은 버튼과 기능을 추가하여 자신만의 웹 페이지를 만들어 보세요!

코드 html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트 처리 예제</title>
    <style>
        body { font-family: Arial, sans-serif; }
        button { padding: 10px 20px; font-size: 16px; }
    </style>
</head>
<body>
    <button id="myButton">클릭하세요!</button>
    <script>
        // 버튼 클릭 이벤트를 처리합니다.
        const button = document.getElementById('myButton');
        button.addEventListener('click', () => {
            alert('버튼이 클릭되었습니다!');
        });
    </script>
</body>
</html>

3.1 이벤트란?

3.1 이벤트란?

예제

실습

응용

정리

실습 과제

댓글 0