12. 클릭하고 반응하기 (이벤트 처리)/12.2 이벤트 객체 활용하기

12.2.1 이벤트 정보 확인하기 - 조용한 정보 수집가가 되어보기

thejavascript4kids 2025. 7. 16. 09:13

📘 12.2.1 이벤트 정보 확인하기 - 조용한 정보 수집가가 되어보기

여러분과 함께 하는 이 시간이 참 좋습니다. 지금까지 이벤트 듣는 도우미를 붙이고 떼어내는 방법을 차근차근 배웠죠? 이번에는 좀 더 깊은 이야기를 나누고 싶어요. 이벤트가 발생했을 때 어떤 일이 일어났는지 조용히 알아보는 방법을 배워볼 거예요. 마치 도서관에서 무슨 일이 일어났는지 사서가 차분히 파악하는 것처럼요.

🧠 새로운 단어들과 친해지기

이벤트에서 정보를 수집할 때 사용하는 중요한 단어들을 살펴보겠어요.

단어 쉬운 설명
이벤트 객체 이벤트가 발생했을 때 자동으로 만들어지는 정보 꾸러미예요.
event.target 실제로 이벤트가 발생한 요소를 가리켜요.
event.type 발생한 이벤트의 종류를 알려줘요.
매개변수 함수가 실행될 때 외부에서 전달받는 값이에요.

이벤트 객체는 영어로 "Event Object"예요. 이벤트가 발생할 때마다 자동으로 만들어지는 정보 상자라고 생각하면 좋을 것 같아요.

✨ 이벤트 정보 확인의 핵심 개념

이벤트가 발생하면 브라우저는 자동으로 이벤트 객체라는 특별한 정보 꾸러미를 만들어줘요. 이 꾸러미 안에는 "어디서 일어났는지", "언제 일어났는지", "어떤 종류의 이벤트인지" 등의 모든 중요한 정보가 들어있답니다.

가장 중요한 정보는 event.target이에요. 이는 실제로 클릭되거나 마우스가 올려진 바로 그 요소를 가리켜요. 마치 교실에서 누가 손을 들었는지 선생님이 정확히 아는 것과 같아요.

또 다른 중요한 정보는 event.type이에요. 이는 어떤 종류의 이벤트가 발생했는지 알려줘요. "click", "mouseover", "keydown" 등 이벤트의 정확한 이름을 확인할 수 있어요.

이런 정보들을 활용하면 하나의 함수로 여러 개의 버튼을 똑똑하게 처리할 수 있어요. 각 버튼마다 별도의 함수를 만들 필요 없이, 이벤트 정보를 보고 어떤 버튼인지 판단해서 적절한 행동을 할 수 있답니다.

일상 속 비유: 조용한 정보 수집 이야기

이벤트 정보 확인을 더 자연스럽게 이해하기 위해 '조용한 정보 수집' 이야기를 들려드릴게요.

교실에서 학생이 손을 들면(이벤트 발생), 선생님은 정보 노트를 자동으로 받게 돼요. 그 노트에는 여러 가지 정보들이 조용히 적혀있어요:

  • "누가 손을 들었나?" (event.target) - 정확히 어떤 학생이 손을 들었는지
  • "어떤 행동인가?" (event.type) - 손을 드는 건지, 책을 드는 건지, 일어서는 건지
  • "언제 했나?" (event.timeStamp) - 정확한 시간
  • "어떤 상황인가?" - 기타 여러 상세 정보들

이 모든 정보를 바탕으로 선생님은 상황을 정확히 파악하고, 그에 맞는 적절한 대응을 할 수 있는 거죠. 마치 진짜 선생님이 교실 상황을 파악해서 학생들을 도와주는 것과 같아요.

🎯 이벤트 정보 확인을 배우는 이유

웹페이지가 똑똑하고 효율적인 페이지가 되려면 이벤트 정보 활용이 꼭 필요해요. 단순히 이벤트가 발생했다는 것만 아는 것이 아니라, 어떤 이벤트가 어디서 발생했는지 정확히 알아야 적절한 반응을 할 수 있거든요.

온라인 문구점을 예로 들어볼게요. 상품 목록에서 여러 개의 "장바구니에 넣기" 버튼이 있다고 상상해보세요. 사용자가 어떤 상품의 버튼을 클릭했는지 정확히 알아야 그 상품을 장바구니에 넣을 수 있어요. 이때 event.target을 사용해서 정확히 어떤 상품 버튼이 클릭되었는지 알 수 있답니다.

온라인 보드게임에서도 마찬가지예요. 게임판에 여러 개의 칸이 있고, 사용자가 어떤 칸을 클릭했는지에 따라 게임의 결과가 달라져야 해요. 이때도 이벤트 정보를 활용해서 정확한 위치를 파악할 수 있어요.

온라인 설문조사에서도 중요해요. 여러 개의 선택지 중에서 어떤 것을 선택했는지, 어떤 입력창에 글을 썼는지 등을 정확히 알아야 올바른 정보를 수집할 수 있어요.

⚙️ 기본 사용법 배우기

이벤트 정보를 확인하는 방법은 기존 이벤트 듣는 도우미에 매개변수 하나만 추가하면 돼요.

// 기본 구조 - 이벤트 객체를 매개변수로 받기
요소.addEventListener("이벤트종류", function(event) {
    console.log("이벤트 정보:", event);
});

실제 사용 예시:

// 버튼을 찾고 이벤트 정보를 확인하는 듣는 도우미 붙이기
let myButton = document.getElementById("infoButton");

myButton.addEventListener("click", function(event) {
    console.log("어떤 요소가 클릭되었나요?", event.target);
    console.log("어떤 종류의 이벤트인가요?", event.type);
    console.log("언제 일어났나요?", event.timeStamp);
});

자주 사용하는 이벤트 정보들:

// 가장 중요한 정보들
event.target      // 실제로 이벤트가 발생한 요소
event.type        // 이벤트 종류 ("click", "mouseover" 등)
event.timeStamp   // 이벤트 발생 시간

// 클릭된 요소의 정보
event.target.id           // 요소의 ID
event.target.textContent  // 요소의 텍스트
event.target.tagName      // 요소의 태그명 (BUTTON, DIV 등)

🧪 직접 해보면서 배우기

이제 실제 예시를 통해서 이벤트 정보 확인이 어떻게 작동하는지 자세히 알아볼게요.

🔹 첫 번째 예시: 기본적인 이벤트 정보 수집하기

첫 번째 예시에서는 클릭 이벤트의 모든 정보를 수집해볼게요.

// ID가 "reportButton"인 버튼을 찾아요
let reportButton = document.getElementById("reportButton");

// 정보 수집 함수 - 모든 정보를 수집해요
reportButton.addEventListener("click", function(event) {
    console.log("📝 === 클릭 정보 보고서 ===");
    console.log("📍 클릭된 곳:", event.target);
    console.log("📋 행동 종류:", event.type);
    console.log("🆔 요소 ID:", event.target.id);
    console.log("📝 요소 텍스트:", event.target.textContent);
    console.log("⏰ 발생 시간:", new Date(event.timeStamp));

    // 정보 수집 결과를 화면에 보여줘요
    event.target.style.backgroundColor = "yellow";
    event.target.textContent = "정보 수집 완료!";
});

console.log("📊 정보 수집 시스템이 준비되었어요!");

이 과정을 차근차근 살펴보면, 먼저 버튼을 찾고 이벤트 듣는 도우미를 붙인 다음, 클릭이 발생하면 event 매개변수를 통해 모든 정보를 수집해요. 마치 진짜 선생님이 교실에서 정보를 하나씩 수집하는 것과 같아요.

🔹 두 번째 예시: 여러 버튼을 하나의 함수로 처리하기

이번에는 여러 개의 학생(버튼)을 하나의 선생님 함수로 관리해볼게요.

// 여러 개의 학생 버튼들을 찾아요
let student1 = document.getElementById("student1");
let student2 = document.getElementById("student2");
let student3 = document.getElementById("student3");

// 똑똑한 선생님 함수 - 어떤 학생이든 처리 가능
function manageStudent(event) {
    let clickedStudent = event.target;

    console.log("👨‍🏫 학생 관리 시작!");
    console.log("학생 ID:", clickedStudent.id);

    // 각 학생별로 다른 처리
    if (clickedStudent.id === "student1") {
        clickedStudent.style.backgroundColor = "red";
        clickedStudent.textContent = "발표자 선정!";
        console.log("🎤 발표자로 선정되었어요!");
    } else if (clickedStudent.id === "student2") {
        clickedStudent.style.backgroundColor = "green";
        clickedStudent.textContent = "도우미 선정!";
        console.log("🤝 도우미로 선정되었어요!");
    } else if (clickedStudent.id === "student3") {
        clickedStudent.style.backgroundColor = "orange";
        clickedStudent.textContent = "관찰자 선정!";
        console.log("👀 관찰자로 선정되었어요!");
    }
}

// 모든 학생에게 같은 선생님을 배치해요
student1.addEventListener("click", manageStudent);
student2.addEventListener("click", manageStudent);
student3.addEventListener("click", manageStudent);

console.log("👨‍🏫 학급 관리 시스템 준비 완료!");

이 예시에서는 하나의 함수가 여러 버튼을 처리하는 방법을 보여줘요. event.target을 사용해서 어떤 버튼이 클릭되었는지 파악하고, 각각에 맞는 다른 처리를 할 수 있어요.

🔹 세 번째 예시: 다양한 행동 유형 분석하기

마지막으로 클릭, 마우스 이동 등 다양한 종류의 행동을 분석해볼게요.

// 활동 영역(요소)을 찾아요
let activityArea = document.getElementById("activityArea");

// 다목적 모니터링 함수 - 모든 종류의 행동을 분석할 수 있어요
function monitorActivity(event) {
    console.log("📊 활동 분석 중...");
    console.log("활동 유형:", event.type);

    // 행동 유형별로 다른 분석 방법을 적용해요
    if (event.type === "click") {
        activityArea.textContent = "클릭 활동 감지! 🖱️";
        activityArea.style.backgroundColor = "lightblue";
        console.log("🖱️ 클릭 활동이 기록되었어요!");
    } else if (event.type === "mouseover") {
        activityArea.textContent = "마우스 접근 감지! 🐭";
        activityArea.style.backgroundColor = "lightyellow";
        console.log("🐭 마우스 접근이 기록되었어요!");
    } else if (event.type === "mouseout") {
        activityArea.textContent = "마우스 이탈 감지! 👋";
        activityArea.style.backgroundColor = "lightgray";
        console.log("👋 마우스 이탈이 기록되었어요!");
    }

    console.log("분석 완료: " + event.type + " 활동");
}

// 여러 종류의 활동에 대비해서 모니터를 설치해요
activityArea.addEventListener("click", monitorActivity);
activityArea.addEventListener("mouseover", monitorActivity);
activityArea.addEventListener("mouseout", monitorActivity);

console.log("📊 활동 모니터링 시스템 가동!");

이 예시에서는 하나의 함수가 여러 종류의 이벤트를 처리하는 방법을 보여줘요. event.type을 사용해서 어떤 종류의 이벤트인지 파악하고, 각각에 맞는 적절한 반응을 할 수 있어요.

🔄 이벤트 정보 확인 과정 정리하기

지금까지 배운 이벤트 정보 확인 과정을 자연스럽게 정리해볼게요.

첫 번째 단계는 매개변수 준비예요. 이벤트 듣는 도우미 함수에 event 매개변수를 추가해서 정보를 받을 준비를 하는 거죠. 두 번째는 이벤트 발생이에요. 사용자가 클릭, 마우스 이동 등의 행동을 수행하는 단계예요.

세 번째는 정보 객체 생성이에요. 브라우저가 자동으로 이벤트 정보 객체를 생성해서 함수에 전달하는 과정이에요. 네 번째는 정보 추출이에요. event.target, event.type 등을 사용해서 필요한 정보를 추출하는 단계예요.

마지막으로는 적절한 처리 단계예요. 추출한 정보를 바탕으로 각 상황에 맞는 적절한 동작을 실행하는 과정이에요.

🧚‍♀️ 이야기로 다시 배우기: 조용한 도서관의 정보 수집 이야기

지금까지 배운 내용을 하나의 이야기로 다시 정리해볼까요?

어느 조용한 오후, 우리 동네 도서관에 정보 수집 사서 EventObject가 있었어요. 이 사서는 도서관에서 어떤 일이 일어나면 조용히 달려가서 모든 정보를 수집하는 일을 했답니다.

어느 날, 컴퓨터실 담당자가 사서를 찾아왔어요. "사서님, 우리 컴퓨터실에 버튼이 여러 개 있는데, 이용자들이 어떤 버튼을 클릭했는지 정확히 알고 싶어요."

정보 수집 사서가 차분한 미소를 지으며 말했어요. "제가 특별한 정보 상자를 드릴게요"

사서는 상자를 들며 부드럽게 설명했어요. "일이 일어날 때마다 정보 상자(event)가 자동으로 나타날 거예요. 그 안에는 이런 정보들이 조용히 들어있답니다"

// 정보 상자 사용법
function handleEvent(event) {
    console.log("어디서:", event.target); // 어디서 일어났는지
    console.log("무엇이:", event.type); // 어떤 일인지
    console.log("언제:", event.timeStamp); // 언제 일어났는지
}

"이제 하나의 담당자로 모든 이용자를 관리할 수 있어요" 사서가 조용히 말했어요.

컴퓨터실 담당자는 감탄했어요. "정말 신기해요! 이제 각 버튼마다 별도의 함수를 만들 필요가 없겠네요!"

정보 수집 사서의 도움으로 우리 동네의 모든 담당자들이 효율적이고 똑똑한 관리 시스템을 만들 수 있게 되었답니다.

🧠 자주 하는 실수와 주의할 점

이벤트 정보를 확인할 때 실수하기 쉬운 부분들을 미리 알아두면 더 안전하게 코딩할 수 있어요.

❌ 실수 1: 매개변수를 받지 않고 이벤트 객체 사용하기

// 잘못된 방법 - 매개변수 없이 event 사용
element.addEventListener("click", function() {
    console.log(event.target); // 에러! event가 정의되지 않았어요
});

// 올바른 방법 - 매개변수로 event 받기
element.addEventListener("click", function(event) {
    console.log(event.target); // 정상 작동해요!
});

이런 실수가 생기는 이유는 이벤트 객체를 받기 위해서는 반드시 함수의 매개변수로 받아야 하기 때문이에요. 매개변수 없이는 이벤트 정보에 접근할 수 없어요.

❌ 실수 2: event.target과 this를 헷갈리기

// 헷갈리기 쉬운 상황
let button = document.getElementById("myButton");

button.addEventListener("click", function(event) {
    console.log("this:", this);           // 이벤트가 붙은 요소
    console.log("event.target:", event.target); // 실제 클릭된 요소

    // 대부분의 경우 같지만, event.target이 더 명확해요
    console.log("둘이 같나요?", this === event.target); // 보통 true
});

// 명확한 방법 - event.target 사용
button.addEventListener("click", function(event) {
    let clickedElement = event.target;
    console.log("클릭된 요소:", clickedElement);
});

event.target을 사용하는 것이 더 명확하고 안전해요. 특히 복잡한 HTML 구조에서는 둘이 다를 수 있어요.

❌ 실수 3: 매개변수 이름을 일관성 없게 사용하기

// 혼란스러운 방법 - 매번 다른 이름 사용
element1.addEventListener("click", function(e) {
    console.log(e.target);
});

element2.addEventListener("click", function(evt) {
    console.log(evt.target);
});

element3.addEventListener("click", function(eventObj) {
    console.log(eventObj.target);
});

// 일관성 있는 방법 - 항상 'event' 사용
element1.addEventListener("click", function(event) {
    console.log(event.target);
});

element2.addEventListener("click", function(event) {
    console.log(event.target);
});

매개변수 이름은 자유롭지만 항상 'event'를 사용하는 것이 가장 이해하기 쉽고 다른 사람이 코드를 읽기에도 좋아요.

✏️ 연습문제로 개념 다지기

이제 배운 내용을 잘 이해했는지 확인해보는 시간이에요. 여러분의 마음속에 이런 생각이 스며들기를 바라요. 이벤트 정보를 수집하는 일은 단순한 데이터 처리가 아니라, 사용자의 행동을 더 깊이 이해하고 더 나은 경험을 제공하기 위한 따뜻한 관심이라는 것을요. 마치 친구의 작은 표정 변화도 놓치지 않고 살피는 마음처럼요.

Ex1) 클릭된 버튼의 정보를 모두 출력하는 정보 수집 함수를 만들어보자

// 질문 버튼을 찾아서 변수에 저장해요
let questionButton = document.getElementById("questionButton");

// 버튼 정보를 모두 수집하는 함수를 만들어요
questionButton.addEventListener("click", function(event) {
    console.log("📋 === 버튼 정보 수집 ===");
    console.log("버튼 ID:", event.target.id);
    console.log("버튼 텍스트:", event.target.textContent);
    console.log("이벤트 종류:", event.type);
    console.log("클릭 시간:", new Date(event.timeStamp));

    alert("정보 수집 완료! 콘솔을 확인해보세요!");
});

console.log("📊 버튼 정보 수집 시스템이 준비되었어요!");

이 연습을 통해 기본적인 이벤트 정보 수집 방법을 익힐 수 있어요.

Ex2) 여러 과목 버튼을 하나의 함수로 처리하는 시스템을 만들어보자

// 과목별로 다른 반응을 보이는 시스템을 만들어요
function handleSubjectButton(event) {
    let buttonId = event.target.id;
    console.log("선택된 과목:", buttonId);

    // 버튼 ID에 따라 다른 색깔을 적용해요
    if (buttonId === "mathButton") {
        event.target.style.backgroundColor = "lightblue";
        event.target.textContent = "수학 선택! 📐";
        console.log("📐 수학 과목 선택!");
    } else if (buttonId === "scienceButton") {
        event.target.style.backgroundColor = "lightgreen";
        event.target.textContent = "과학 선택! 🔬";
        console.log("🔬 과학 과목 선택!");
    } else if (buttonId === "englishButton") {
        event.target.style.backgroundColor = "lightyellow";
        event.target.textContent = "영어 선택! 📚";
        console.log("📚 영어 과목 선택!");
    }
}

// 모든 과목 버튼에 같은 함수를 적용해요
let mathBtn = document.getElementById("mathButton");
let scienceBtn = document.getElementById("scienceButton");
let englishBtn = document.getElementById("englishButton");

mathBtn.addEventListener("click", handleSubjectButton);
scienceBtn.addEventListener("click", handleSubjectButton);
englishBtn.addEventListener("click", handleSubjectButton);

이 문제는 하나의 함수로 여러 요소를 처리하는 방법을 연습하는 데 도움이 돼요.

Ex3) 클릭과 마우스 이동을 구분해서 처리하는 만능 함수를 만들어보자

// 다양한 이벤트 타입을 구분해서 처리하는 똑똑한 요소를 찾아요
let smartBoard = document.getElementById("smartBoard");

// 어떤 이벤트든 처리할 수 있는 만능 함수를 만들어요
function handleAnyEvent(event) {
    console.log("감지된 활동:", event.type);

    // 이벤트 종류에 따라 다른 처리를 해요
    if (event.type === "click") {
        event.target.textContent = "클릭되었어요! 🖱️";
        event.target.style.backgroundColor = "lightcoral";
        console.log("🖱️ 클릭 활동이 감지되었어요!");
    } else if (event.type === "mouseover") {
        event.target.textContent = "마우스가 올라왔어요! 🐭";
        event.target.style.backgroundColor = "lightyellow";
        console.log("🐭 마우스 접근이 감지되었어요!");
    } else if (event.type === "mouseout") {
        event.target.textContent = "마우스가 떠났어요! 👋";
        event.target.style.backgroundColor = "lightgray";
        console.log("👋 마우스 이탈이 감지되었어요!");
    }
}

// 여러 이벤트 타입에 같은 함수를 붙여요
smartBoard.addEventListener("click", handleAnyEvent);
smartBoard.addEventListener("mouseover", handleAnyEvent);
smartBoard.addEventListener("mouseout", handleAnyEvent);

console.log("🤖 똑똑한 만능 이벤트 처리 시스템 가동!");

이 연습문제를 통해 event.type을 활용한 다중 이벤트 처리 방법을 익힐 수 있어요.

📚 11단원 복습문제 - DOM 조작 기억하기

12단원을 배우면서 11단원에서 배운 DOM 조작도 함께 기억해볼까요?

복습문제 1: 이벤트 정보와 DOM 조작을 함께 사용하기

// 11단원에서 배운 DOM 조작과 12단원의 이벤트 정보를 함께 사용해보세요
let createButton = document.getElementById("createButton");
let container = document.getElementById("container");

createButton.addEventListener("click", function(event) {
    // 이벤트 정보로 어떤 버튼이 클릭되었는지 확인
    console.log("클릭된 버튼:", event.target.textContent);
    console.log("클릭 시간:", new Date(event.timeStamp));

    // 11단원에서 배운 createElement로 새 요소 만들기
    let newMessage = document.createElement("div");

    // 이벤트 정보를 활용해서 동적인 내용 만들기
    let clickTime = new Date(event.timeStamp).toLocaleTimeString();
    newMessage.textContent = event.target.textContent + "가 " + clickTime + "에 클릭되었어요!";
    newMessage.style.padding = "10px";
    newMessage.style.margin = "5px";
    newMessage.style.backgroundColor = "lightblue";

    // 11단원에서 배운 appendChild로 요소 추가하기
    container.appendChild(newMessage);

    console.log("✅ 이벤트 정보를 활용해서 새 요소를 DOM에 추가했어요!");

    // 버튼 텍스트도 업데이트
    let clickCount = container.children.length;
    event.target.textContent = "메시지 생성 (" + clickCount + "개)";
});

해설: 11단원에서 배운 createElement, appendChild 같은 DOM 조작 기능과 12단원의 이벤트 정보를 함께 사용하면 더욱 interactive한 웹페이지를 만들 수 있어요! 이벤트가 언제, 어떤 요소에서 발생했는지 정보를 활용해서 동적으로 내용을 생성하고 DOM에 추가할 수 있답니다.

🤔 심화 문제로 실력 확인하기

기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해 이벤트 정보 확인에 대한 이해를 확인해보겠어요.

Q1. 이벤트 객체가 무엇인지 초등학생도 이해할 수 있게 설명해보세요.

정답: 이벤트 객체는 사용자가 어떤 행동을 했을 때 그 행동에 대한 모든 정보를 담고 있는 정보 상자 같은 거예요.

해설: 마치 선생님이 학생의 행동을 관찰하고 메모장에 "누가, 언제, 어디서, 무엇을, 어떻게" 했는지 기록하는 것과 같아요. 이 정보를 바탕으로 웹페이지가 적절한 반응을 할 수 있어요.

Q2. event.target을 사용하는 가장 큰 장점 2가지를 말해보세요.

정답: 1) 여러 개의 비슷한 요소에 하나의 함수로 이벤트를 처리할 수 있어서 코드가 간단해지고, 2) 실제로 클릭된 요소를 정확히 알 수 있어서 각각에 맞는 다른 처리를 할 수 있어요.

해설: 예를 들어 과목 선택 버튼이 10개 있다면, 10개의 서로 다른 함수를 만들 필요 없이 하나의 함수로 모든 버튼을 처리할 수 있어요. event.target으로 어떤 과목의 버튼인지 정확히 알 수 있기 때문이에요.

Q3. 다음 코드에서 잘못된 부분을 찾고 올바르게 수정해보세요.

element.addEventListener("click", function() {
    console.log("클릭된 요소:", event.target);
});

정답: 매개변수로 event를 받지 않았어요.

해설: 이벤트 객체를 사용하려면 반드시 함수의 매개변수로 받아야 해요. 매개변수 없이 event를 사용하면 "정의되지 않았다"는 에러가 발생해요.

올바른 코드:

element.addEventListener("click", function(event) {
    console.log("클릭된 요소:", event.target);
});

지금까지 이벤트 정보 확인하기의 모든 비밀을 알아보았어요. 이제 여러분도 웹페이지에서 일어나는 모든 일을 정확히 파악할 수 있는 정보 수집 전문가가 되었답니다!

✅ 학습 완료 체크리스트

이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!

학습 내용 이해했나요?
이벤트 객체의 기본 개념 ✅
기본 사용법과 문법 ✅
주요 특징과 차이점 ✅
자주 하는 실수들 ✅
실전 예제 이해 ✅

🎯 추가 연습 문제들

조금 더 연습하고 싶은 친구들을 위한 추가 문제들이에요!

추가 문제 1. 클릭된 버튼의 ID와 텍스트를 출력하는 이벤트를 만들어보세요.

// 답:
let myButton = document.getElementById("testBtn");
myButton.addEventListener("click", function(event) {
    console.log("버튼 ID:", event.target.id);
    console.log("버튼 텍스트:", event.target.textContent);
});

추가 문제 2. 이벤트 타입에 따라 다른 메시지를 출력하는 함수를 만들어보세요.

// 답:
let testDiv = document.getElementById("testDiv");
function showEventType(event) {
    console.log("이벤트 타입:", event.type);
    if (event.type === "click") {
        console.log("클릭 이벤트 발생!");
    } else if (event.type === "mouseover") {
        console.log("마우스 올림 이벤트 발생!");
    }
}
testDiv.addEventListener("click", showEventType);
testDiv.addEventListener("mouseover", showEventType);

추가 문제 3. 여러 버튼을 하나의 함수로 처리하는 이벤트를 만들어보세요.

// 답:
function handleAnyButton(event) {
    let buttonId = event.target.id;
    console.log("클릭된 버튼:", buttonId);
    event.target.style.backgroundColor = "lightblue";
}

let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");
btn1.addEventListener("click", handleAnyButton);
btn2.addEventListener("click", handleAnyButton);

추가 문제 4. event.target과 event.currentTarget의 차이점은 무엇인가요?

답: event.target은 실제로 클릭된 요소이고, event.currentTarget은 이벤트 리스너가 등록된 요소입니다. 대부분의 경우 같지만, 중첩된 요소에서는 다를 수 있어요.

추가 문제 5. 다음 코드에서 잘못된 부분을 찾고 수정해보세요.

element.addEventListener("click", function() {
    console.log("클릭된 요소:", event.target);
});

답: 매개변수로 event를 받지 않았습니다. 올바른 코드:

element.addEventListener("click", function(event) {
    console.log("클릭된 요소:", event.target);
});

🔄 단계별 진행 과정 정리

지금까지 배운 내용을 단계별로 다시 한번 정리해볼게요.

1단계 과정: 버튼 찾기 → 이벤트 리스너 등록 → 클릭시 이벤트 객체 정보 출력

2단계 과정: 버튼들 찾기 → 공통 함수 작성 → 각 버튼에 등록 → event.target으로 구분

3단계 과정: 요소 찾기 → 다목적 함수 작성 → 여러 이벤트 등록 → event.type으로 구분 처리

📂 마무리 정보

오늘 배운 12.2.1 내용이 여러분의 자바스크립트 지식 창고에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!

기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.



🚀 더 체계적인 JavaScript 학습을 원하신다면?
이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼
📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

'12. 클릭하고 반응하기 (이벤트 처리) > 12.2 이벤트 객체 활용하기' 카테고리의 다른 글

12.2.2 기본 동작 막기 (preventDefault) - 브라우저의 자동 기능을 조용히 조절하는 섬세한 방법  (0) 2025.07.16

'12. 클릭하고 반응하기 (이벤트 처리)/12.2 이벤트 객체 활용하기'의 다른글

  • 현재글12.2.1 이벤트 정보 확인하기 - 조용한 정보 수집가가 되어보기

관련글

티스토리툴바