3.4 이벤트 객체

약 7분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

3.4 이벤트 객체

자바스크립트에서 이벤트는 웹 페이지 내에서 발생하는 다양한 행동을 지칭합니다. 이러한 이벤트가 발생할 때, 해당 이벤트에 대한 정보를 담고 있는 이벤트 객체(event object)가 생성됩니다. 이 객체는 이벤트에 대한 세부정보를 제공하며, 이벤트 리스너(handler)에서 이를 활용하여 필요한 작업을 수행할 수 있습니다.

이벤트 객체란?

이벤트 객체는 특정 이벤트가 발생했을 때 전달되며, 이벤트의 다양한 속성과 메서드를 포함하고 있습니다. 예를 들어, 클릭 이벤트가 발생하면 그 시점의 마우스 위치, 클릭한 요소, 이벤트의 타입 등의 정보를 담고 있습니다.

예제: 클릭 이벤트와 이벤트 객체 활용하기

아래의 HTML과 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>
        #my-button {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button id="my-button">클릭하세요!</button>
    <script>
        // 버튼 클릭 이벤트 리스너 등록
        const button = document.getElementById('my-button');
        button.addEventListener('click', (event) => {
            // 이벤트 객체를 통해 정보를 출력
            console.log('이벤트 타입:', event.type);
            console.log('클릭한 위치:', event.clientX, event.clientY);
            console.log('활성화된 요소:', event.target);
        });
    </script>
</body>
</html>

위 예제에서는 버튼을 클릭할 때마다 이벤트 객체의 type, clientX, clientY, target 등의 속성을 이용해 클릭한 위치와 클릭된 요소에 대한 정보를 콘솔에 출력합니다.

실습

아래의 코드를 바탕으로 실습해 보세요.

버튼을 클릭할 때마다 클릭한 위치에 마커가 나타나는 기능을 추가하세요.
마커는 원형이며, 클릭한 위치에 따라 이동해야 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트 객체 실습</title>
    <style>
        #marker {
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
        }
    </style>
</head>
<body>
    <button id="my-button">클릭하세요!</button>

    <div id="marker"></div>

    <script>
        const button = document.getElementById('my-button');
        const marker = document.getElementById('marker');
        button.addEventListener('click', (event) => {
            // 클릭한 위치에 마커 이동
            marker.style.left = `${event.clientX}px`;
            marker.style.top = `${event.clientY}px`;
        });
    </script>
</body>
</html>

응용

이벤트 객체의 정보를 활용하여 복잡한 사용자 상호작용을 구현할 수 있습니다. 예를 들어, 슬라이더나 드래그 앤 드롭 기능을 만들 때 이벤트 객체를 통해 사용자의 입력을 처리할 수 있습니다.

정리

이벤트 객체는 이벤트가 발생할 때 제공되는 정보의 집합입니다.
이 객체를 사용하여 이벤트 발생 시의 상황을 이해하고 웹 페이지의 요소를 동적으로 제어할 수 있습니다.
실습 및 응용 문제: 웹 페이지에서 여러 버튼을 클릭하고 색상을 변경하는 작업이나, 이미지 갤러리를 만들기 위해 이벤트 객체를 활용해 보세요.

3.4 이벤트 객체

3.4 이벤트 객체

이벤트 객체란?

예제: 클릭 이벤트와 이벤트 객체 활용하기

실습

응용

정리

댓글 0