12. 클릭하고 반응하기 (이벤트 처리)/12.3 이벤트 위임

12.3.1 이벤트 위임이란? - 하나가 모두를 품는 따뜻한 이야기

thejavascript4kids 2025. 7. 16. 09:18

📘 12.3.1 이벤트 위임이란? - 하나가 모두를 품는 따뜻한 이야기

안녕하세요, 여러분. 지난 시간을 통해 이벤트 객체와 기본 동작을 다루는 방법을 함께 살펴보았죠. 오늘은 웹페이지에서 수많은 요소들을 마치 하나의 큰 손으로 감싸 안듯 관리할 수 있는, 참으로 아름다운 기법을 배워보려 합니다. 이벤트 위임이라는 이름을 가진 이 방법은, 마치 한 그루의 나무가 수많은 잎사귀들을 품어 안듯, 부모가 자식들을 따뜻하게 돌보는 방식과 닮아 있어요.

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

이벤트를 하나로 모아 관리하는 데 필요한 소중한 단어들을 차근차근 알아보겠습니다.

단어 마음을 담은 설명
이벤트 위임 부모 요소가 자식 요소들의 이벤트를 대신 받아 처리하는, 마치 어머니가 여러 자녀를 돌보듯 하는 방법이에요.
이벤트 버블링 이벤트가 발생한 곳에서 부모로, 그 부모의 부모로 차례로 전해지는 자연스러운 흐름이에요.
동적 요소 JavaScript로 나중에 만들어지는 요소들을 말해요. 마치 새싹이 돋아나듯 나타나는 것들이죠.
성능 최적화 컴퓨터가 더 빠르고 효율적으로 일할 수 있도록 도와주는 것이에요.

이벤트 위임이라는 말은 "delegate(위임하다)"에서 나온 말로, 여러 개의 일을 믿을 만한 누군가에게 맡겨서 처리하는 것을 의미합니다.

✨ 이벤트 위임이란 무엇일까요

웹페이지를 만들다 보면, 같은 일을 하는 요소들이 참 많이 생겨나곤 합니다. 게시판의 100개 "좋아요" 버튼이나, 쇼핑몰의 50개 상품 카드처럼 말이죠. 이런 상황에서 각각의 요소마다 하나하나 이벤트를 걸어주는 것은 정말 마음이 무거운 일이에요.

이벤트 위임은 이런 무거움을 덜어주는 따뜻한 해결책입니다. 각 자식 요소에 이벤트를 하나씩 걸어주는 대신, 공통의 부모 요소 하나에만 이벤트를 걸어줍니다. 그러면 이벤트 버블링이라는 자연스러운 현상을 통해 자식에서 발생한 이벤트가 부모에게 전해지고, 부모가 이를 받아 적절히 처리하는 방식이에요.

이 방법의 가장 소중한 장점은 나중에 추가되는 요소들에도 저절로 이벤트가 적용된다는 것입니다. 새로운 버튼이나 카드를 JavaScript로 추가해도 별도로 이벤트를 걸어줄 필요가 없어요. 또한 컴퓨터의 부담도 크게 줄여줄 수 있답니다.

마음을 담은 비유: 마을의 우체국 이야기

이벤트 위임을 좀 더 친근하게 이해하기 위해서 '마을의 우체국' 이야기를 해볼게요.

100가구가 사는 작은 마을을 떠올려보세요. 만약 각 집마다 개별 우편함을 두고 각각 우체부를 배치한다면 어떨까요? 우편 배달비도 많이 들고, 관리도 복잡하겠죠. 하지만 실제로는 마을 중앙의 우체국 하나에서 모든 우편물을 처리합니다.

주민들이 편지를 받을 일이 생기면 우체국에서 이를 받아, "몇 번지에 사는 누구에게 온 편지인지" 확인한 후 적절한 곳으로 배달해줍니다. 새로운 가족이 이사 와도 별도의 우체부를 고용할 필요가 없어요. 기존 우체국에서 자연스럽게 배달이 이뤄지죠.

웹페이지의 이벤트 위임도 정확히 이와 같습니다. 부모 요소가 우체국 역할을 하고, 자식 요소들은 각각의 집이에요. 자식에서 이벤트가 발생하면 부모가 이를 받아서 "어떤 자식에서 무슨 이벤트가 일어났는지" 확인하고 따뜻한 처리를 해주는 것이죠.

🎯 이벤트 위임을 사용하는 이유

그렇다면 개발자들은 왜 이벤트 위임을 선택할까요? 몇 가지 소중한 이유들이 있어요.

첫 번째로 컴퓨터를 더 부드럽게 사용할 수 있어요. 100개의 버튼이 있을 때 각각에 이벤트를 걸어주면 100개의 이벤트 리스너가 컴퓨터에 머물러야 해요. 하지만 이벤트 위임을 사용하면 단 1개의 이벤트 리스너만 있으면 되죠. 이는 특히 큰 웹사이트에서 컴퓨터의 숨결을 가볍게 해주는 소중한 장점이에요.

두 번째로 나중에 태어나는 요소들도 저절로 처리돼요. JavaScript로 나중에 추가되는 요소들에 대해서는 일반적으로 별도로 이벤트를 걸어줘야 해요. 하지만 이벤트 위임을 사용하면 새로 태어난 요소들도 자동으로 부모의 따뜻한 품 안에 포함돼요.

세 번째로 코드가 한결 정리돼요. 비슷한 기능을 하는 여러 요소들을 하나의 함수로 관리할 수 있어서 코드가 훨씬 깔끔하고 돌보기 쉬워져요. 나중에 기능을 바꿀 때도 한 곳만 손보면 모든 요소에 적용돼요.

마지막으로 웹페이지가 더 빨라져요. 이벤트를 걸어주는 과정 자체도 시간이 걸리는 일인데, 위임을 사용하면 이런 작업을 최소화할 수 있어서 페이지 로딩도 가벼워져요.

⚙️ 기본 사용법 배우기

이벤트 위임의 기본 사용법은 일반적인 이벤트 리스너와 닮아 있지만, 중요한 차이가 있어요.

// 기본 틀
부모요소.addEventListener("이벤트타입", function(event) {
    // event.target으로 실제 이벤트가 발생한 자식 요소 확인
    if (event.target.matches("조건")) {
        // 해당 자식 요소에 대한 처리
    }
});

실제 예시:

// 버튼 컨테이너에 이벤트 위임
let buttonContainer = document.getElementById("buttonContainer");
buttonContainer.addEventListener("click", function(event) {
    // 클릭된 요소가 버튼인지 확인
    if (event.target.tagName === "BUTTON") {
        console.log("버튼 클릭됨:", event.target.textContent);
    }
});

핵심 요소들:

가장 중요한 것은 event.target이에요. 이는 실제로 이벤트가 발생한 요소를 가리켜요. 부모 요소에서 이벤트를 받았지만, event.target을 통해 어떤 자식 요소에서 이벤트가 시작되었는지 알 수 있어요.

두 번째로 조건 확인이 소중해요. tagName, className, id 등을 사용해서 우리가 돌보고 싶은 요소인지 확인해야 해요. 그렇지 않으면 부모 요소의 빈 공간을 클릭했을 때도 이벤트가 발생할 수 있거든요.

🧪 직접 해보며 배우기

이제 실제 예시를 통해서 이벤트 위임이 어떻게 움직이는지 차근차근 살펴볼게요.

🔹 첫 번째 예시: 버튼들에게 이벤트 위임 선물하기

첫 번째 예시에서는 여러 개의 버튼이 있는 컨테이너에 이벤트 위임을 선물하는 방법을 배워볼게요.

// 버튼들을 품고 있는 컨테이너를 찾아서 변수에 담아요
let buttonGroup = document.getElementById("buttonGroup");

// 부모 컨테이너에 클릭 이벤트를 선물해요
buttonGroup.addEventListener("click", function(event) {
    // 실제로 클릭된 요소가 버튼인지 확인해요
    if (event.target.tagName === "BUTTON") {
        console.log("클릭된 버튼:", event.target.textContent);

        // 클릭된 버튼의 배경색을 부드럽게 변경해요
        event.target.style.backgroundColor = "lightblue";

        // 버튼별로 다른 마음을 담고 싶다면 추가 조건 확인
        if (event.target.id === "saveBtn") {
            alert("저장 버튼이 클릭되었어요!");
        }
    }
});

console.log("버튼 그룹에 이벤트 위임이 선물되었어요.");

이 과정을 차근차근 살펴보면, 먼저 여러 버튼을 품고 있는 부모 컨테이너를 찾아요. 그다음 부모에게만 이벤트 리스너를 선물하고, 이벤트가 발생했을 때 event.target으로 실제 클릭된 버튼을 확인해요. 마지막으로 해당 버튼에 대한 따뜻한 처리를 실행하죠. 이렇게 하면 컨테이너 안에 몇 개의 버튼이 있든 상관없이 모든 버튼이 저절로 처리돼요.

🔹 두 번째 예시: 할 일 목록에 이벤트 위임 적용하기

두 번째 예시에서는 할 일 목록의 각 항목에 이벤트 위임을 적용하는 방법을 배워볼게요.

// 할 일 목록 컨테이너를 찾아서 변수에 담아요
let todoList = document.getElementById("todoList");

// 목록 컨테이너에 클릭 이벤트를 위임해요
todoList.addEventListener("click", function(event) {
    // 클릭된 요소가 목록 항목(li)인지 확인해요
    if (event.target.tagName === "LI") {
        console.log("할 일 항목 클릭:", event.target.textContent);

        // 완료 상태를 부드럽게 바꿔줘요 (완료 ↔ 미완료)
        if (event.target.style.textDecoration === "line-through") {
            // 이미 완료된 상태라면 미완료로 변경
            event.target.style.textDecoration = "none";
            event.target.style.color = "black";
        } else {
            // 미완료 상태라면 완료로 변경
            event.target.style.textDecoration = "line-through";
            event.target.style.color = "gray";
        }
    }
});

console.log("할 일 목록에 이벤트 위임이 적용되었어요.");

이 예시를 차근차근 들여다보면, 먼저 할 일 목록의 컨테이너를 찾아와서 이벤트 위임을 설정해요. 사용자가 목록의 어떤 항목을 클릭하든 부모가 이를 받아서 처리하죠. 그다음 클릭된 요소가 실제 목록 항목인지 확인하고, 완료 상태를 시각적으로 바꿔줘요. 이렇게 하면 나중에 새로운 할 일이 추가되어도 저절로 같은 기능이 적용돼요.

🔹 세 번째 예시: 카드 선택에 이벤트 위임 적용하기

세 번째 예시에서는 여러 개의 카드 중에서 하나를 선택하는 기능에 이벤트 위임을 적용해볼게요.

// 카드들을 품고 있는 컨테이너를 찾아서 변수에 담아요
let cardContainer = document.getElementById("cardContainer");

// 카드 컨테이너에 클릭 이벤트를 위임해요
cardContainer.addEventListener("click", function(event) {
    // 클릭된 요소가 카드 클래스를 가지고 있는지 확인해요
    if (event.target.classList.contains("card")) {
        console.log("카드가 선택되었어요.");

        // 먼저 모든 카드의 선택 상태를 부드럽게 해제해요
        let allCards = cardContainer.querySelectorAll(".card");
        for (let i = 0; i < allCards.length; i++) {
            allCards[i].classList.remove("selected");
            allCards[i].style.border = "1px solid gray";
        }

        // 클릭된 카드만 선택 상태로 만들어줘요
        event.target.classList.add("selected");
        event.target.style.border = "3px solid blue";
    }
});

console.log("카드 선택 기능에 이벤트 위임이 적용되었어요.");

이 예시에서는 클래스명을 기준으로 이벤트 위임을 적용하는 방법을 배울 수 있어요. 먼저 카드 컨테이너에 이벤트를 위임하고, 클릭된 요소가 실제 카드인지 클래스명으로 확인해요. 그다음 모든 카드의 선택 상태를 부드럽게 초기화한 후, 클릭된 카드만 선택 상태로 만들어줘요. 이렇게 하면 언제든지 하나의 카드만 선택된 상태를 유지할 수 있어요.

🔄 이벤트 위임 사용 과정 정리하기

지금까지 학습한 이벤트 위임의 사용 단계를 자연스럽게 정리해볼게요.

첫 번째 단계는 부모 요소 선택하기예요. 처리하고 싶은 자식 요소들을 모두 품고 있는 적절한 부모 요소를 찾아야 해요. 너무 먼 부모를 선택하면 성능에 좋지 않고, 너무 가까운 부모를 선택하면 일부 요소를 놓칠 수 있어요.

두 번째는 이벤트 등록 단계예요. 선택한 부모 요소에 이벤트 리스너를 선물해줘요. 이때 자식 요소들에는 개별적으로 이벤트를 걸어주지 않는 것이 핵심이에요.

세 번째는 실제 대상 확인하기 단계예요. 이벤트가 발생했을 때 event.target을 통해 실제로 이벤트가 발생한 자식 요소를 확인해요. 그리고 그 요소가 우리가 돌보고 싶은 요소인지 조건문으로 검사해요.

마지막 단계는 따뜻한 처리하기예요. 조건을 만족하는 요소에 대해서만 원하는 동작을 실행해요. 이때 각 요소의 특성에 맞게 다른 처리를 할 수도 있어요.

🧚‍♀️ 이야기로 다시 배우기: 작은 학교의 선생님

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

작은 시골 학교에 오신 것을 환영해요. 이 학교에는 30명의 학생이 있는 따뜻한 교실이 있어요. 예전에는 각 학생의 책상마다 개별 벨을 설치하고, 각각의 벨에 개별 선생님을 배치했었어요.

하지만 이 방법은 너무 복잡했어요. 선생님도 30명이나 필요하고, 새로운 학생이 들어올 때마다 새로운 선생님을 모셔야 했거든요. 그래서 학교는 따뜻한 새로운 방법을 도입했어요.

이제는 교실 앞 선생님 한 분만 계시면 돼요. 어떤 학생이 도움이 필요하면 손을 들어 알려주고, 선생님은 즉시 "몇 번째 줄 몇 번째 자리에서 무슨 도움이 필요한지" 파악하고, 그에 맞는 따뜻한 도움을 주세요.

만약 3번째 줄 2번째 학생이 "연필이 부러졌어요"라고 하면, 선생님은 "아, 3-2번 자리에서 연필 교체 요청이구나"라고 파악하고 새 연필을 가져다주세요. 1번째 줄 5번째 학생이 "책을 깜빡했어요"라고 하면 "1-5번 자리에서 책이 필요하구나"라고 알아채고 여분의 책을 빌려주시죠.

새로운 학생이 전학 와도 문제없어요. 저절로 같은 시스템으로 돌봄을 받게 돼요. 이처럼 하나의 따뜻한 마음으로 모든 것을 효율적으로 돌보는 것이 바로 이벤트 위임의 핵심이에요!

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

이벤트 위임을 사용할 때 주의해야 할 몇 가지 실수들을 미리 알아두면 더 안전하게 사용할 수 있어요.

❌ 실수 1: event.target 대신 this를 사용하기

// 잘못된 방법
container.addEventListener("click", function(event) {
    console.log("클릭된 요소:", this); // 항상 container를 가리켜요
    this.style.backgroundColor = "red"; // 부모 컨테이너가 빨간색으로 변해요
});

// 올바른 방법
container.addEventListener("click", function(event) {
    if (event.target.tagName === "BUTTON") {
        console.log("클릭된 버튼:", event.target);
        event.target.style.backgroundColor = "red"; // 클릭된 버튼만 빨간색
    }
});

이런 실수가 발생하는 이유는 이벤트 위임에서는 실제 이벤트가 발생한 자식 요소를 가리키는 event.target을 사용해야 하기 때문이에요. this는 이벤트가 걸려있는 부모 요소를 가리키므로, 우리가 원하는 자식 요소를 조작할 수 없어요.

❌ 실수 2: 실제 대상 요소 확인 없이 처리하기

// 문제가 될 수 있는 방법
container.addEventListener("click", function(event) {
    // 무조건 모든 클릭에 반응
    event.target.style.color = "blue";
    // 빈 공간을 클릭해도 실행돼요
});

// 안전한 방법
container.addEventListener("click", function(event) {
    // 원하는 요소인지 먼저 확인
    if (event.target.classList.contains("clickable")) {
        event.target.style.color = "blue";
    }
});

이 문제가 발생하는 이유는 부모 컨테이너의 빈 공간을 클릭했을 때도 이벤트가 발생하기 때문이에요. 따라서 반드시 event.target이 우리가 돌보고 싶은 요소인지 확인하는 과정이 필요해요.

❌ 실수 3: 너무 넓은 위임 사용하기

// 비효율적인 방법 - 너무 넓은 위임
document.addEventListener("click", function(event) {
    if (event.target.classList.contains("deep-button")) {
        // 문서 전체에서 특정 버튼을 찾는 비효율적인 방법
    }
});

// 효율적인 방법 - 적절한 범위의 위임
let buttonSection = document.getElementById("buttonSection");
buttonSection.addEventListener("click", function(event) {
    if (event.target.tagName === "BUTTON") {
        // 적절한 범위에서 버튼 처리
    }
});

너무 넓은 곳(예: document)에 이벤트를 위임하면 모든 클릭 이벤트를 처리해야 하므로 성능에 좋지 않아요. 적절한 범위의 부모 요소를 선택하는 것이 중요해요.

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

이제 배운 내용을 연습문제를 통해 확실히 익혀볼게요.

작은 마음을 담아, 이번 연습문제들은 아이들이 즐거워할 만한 상황들로 준비해보았어요. 마치 친구들과 함께 놀이를 하듯 가벼운 마음으로 접근해주세요.

Ex1) 여러 버튼 중 아무거나 클릭하면 "어떤 버튼을 눌렀는지" 알려주는 시스템 만들어보자

// 버튼 컨테이너를 찾아서 변수에 담아요
let buttonContainer = document.getElementById("buttonContainer");

// 버튼 컨테이너에 이벤트 위임을 적용해요
buttonContainer.addEventListener("click", function(event) {
    // 클릭된 요소가 버튼인지 확인해요
    if (event.target.tagName === "BUTTON") {
        console.log("클릭된 버튼:", event.target.textContent);
        alert(event.target.textContent + " 버튼을 눌렀어요!");
    }
});

이 연습을 통해 이벤트 위임의 가장 기본적인 사용법을 익힐 수 있어요.

Ex2) 목록 항목을 클릭하면 그 항목이 진한 글씨로 강조되게 만들어보자

// 목록 컨테이너를 찾아서 변수에 담아요
let itemList = document.getElementById("itemList");

// 목록에 클릭 이벤트 위임을 적용해요
itemList.addEventListener("click", function(event) {
    // 클릭된 요소가 목록 항목(li)인지 확인해요
    if (event.target.tagName === "LI") {
        // 먼저 모든 항목의 강조를 부드럽게 해제해요
        let allItems = itemList.querySelectorAll("li");
        for (let i = 0; i < allItems.length; i++) {
            allItems[i].style.fontWeight = "normal";
        }
        // 클릭된 항목만 강조해요
        event.target.style.fontWeight = "bold";
    }
});

이 문제는 목록에서 이벤트 위임을 사용하는 방법을 연습하는 데 도움이 돼요.

Ex3) 카드를 클릭하면 파란 테두리가 생기도록 만들어보자

// 카드 영역을 찾아서 변수에 담아요
let cardArea = document.getElementById("cardArea");

// 카드 영역에 이벤트 위임을 적용해요
cardArea.addEventListener("click", function(event) {
    // 클릭된 요소가 카드 클래스를 가지고 있는지 확인해요
    if (event.target.classList.contains("card")) {
        console.log("카드가 클릭되었어요");
        event.target.style.border = "3px solid blue";
    }
});

이 연습문제를 통해 클래스명을 이용한 이벤트 위임 방법을 배울 수 있어요.

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

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

복습문제 1: 이벤트 위임과 DOM 조작을 함께 사용하기

// 11단원에서 배운 DOM 조작과 12단원의 이벤트 위임을 함께 사용해보세요
let buttonContainer = document.getElementById("buttonContainer");
let messageArea = document.getElementById("messageArea");

buttonContainer.addEventListener("click", function(event) {
    // 클릭된 요소가 버튼인지 확인
    if (event.target.tagName === "BUTTON") {
        console.log("버튼 클릭:", event.target.textContent);

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

        // 이벤트 위임을 활용해서 어떤 버튼이 클릭되었는지 표시
        let buttonText = event.target.textContent;
        let currentTime = new Date().toLocaleTimeString();
        newMessage.textContent = buttonText + " 버튼이 " + currentTime + "에 클릭되었어요!";
        newMessage.style.backgroundColor = "lightblue";
        newMessage.style.padding = "10px";
        newMessage.style.marginBottom = "5px";

        // 11단원에서 배운 appendChild로 메시지 영역에 추가하기
        messageArea.appendChild(newMessage);

        console.log("✅ 이벤트 위임으로 버튼을 구분하고 DOM 조작으로 메시지를 추가했어요!");

        // 메시지가 10개를 넘으면 가장 오래된 메시지 제거
        if (messageArea.children.length > 10) {
            messageArea.removeChild(messageArea.firstElementChild);
        }
    }
});

해설: 11단원에서 배운 createElement, appendChild, removeChild 같은 DOM 조작 기능과 12단원의 이벤트 위임을 함께 사용하면 참으로 효율적인 인터페이스를 만들 수 있어요! 하나의 이벤트 리스너로 여러 버튼을 관리하면서, 각 버튼의 고유한 정보를 활용해서 동적으로 DOM 요소를 생성하고 추가할 수 있답니다. 이렇게 하면 나중에 버튼을 추가해도 별도의 이벤트 등록 없이 저절로 같은 기능이 적용돼요!

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

기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해서 이벤트 위임에 대한 이해를 확인해볼게요.

Q1. 이벤트 위임의 가장 큰 장점 두 가지를 말해보세요.

정답: 1) 컴퓨터를 효율적으로 사용할 수 있어요 (많은 자식 요소에 각각 이벤트를 걸어주지 않아도 돼요), 2) 나중에 동적으로 추가되는 요소에도 저절로 이벤트가 적용돼요.

Q2. 다음 코드에서 문제점을 찾고 수정해보세요.

let container = document.getElementById("container");
container.addEventListener("click", function(event) {
    this.style.backgroundColor = "yellow";
});

정답: this는 부모 컨테이너를 가리키므로 클릭된 자식 요소를 처리할 수 없어요. 올바른 코드는:

let container = document.getElementById("container");
container.addEventListener("click", function(event) {
    // 실제 대상 요소 확인 추가
    if (event.target.classList.contains("item")) {
        event.target.style.backgroundColor = "yellow";
    }
});

해설: 이벤트 위임에서는 반드시 event.target을 사용해서 실제 이벤트가 발생한 자식 요소를 확인하고, 그 요소가 우리가 돌보고 싶은 요소인지 조건을 확인해야 해요.

지금까지 이벤트 위임의 모든 특성과 활용법을 차근차근 알아보았어요. 이 기법은 웹페이지를 더 효율적이고 돌보기 쉽게 만들어주는 소중한 도구예요. 마치 따뜻한 관리시스템처럼, 하나의 중앙 관리자로 모든 것을 효율적으로 처리할 수 있게 해주는 멋진 방법이에요!

✅ 학습 완료 체크리스트

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

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

🎯 추가 연습 문제들

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

추가 문제 1. 버튼 컨테이너에 이벤트 위임을 적용해보세요.

// 답:
let container = document.getElementById("buttonContainer");
container.addEventListener("click", function(event) {
    if (event.target.tagName === "BUTTON") {
        console.log("버튼 클릭:", event.target.textContent);
        event.target.style.backgroundColor = "lightgreen";
    }
});

추가 문제 2. 목록 항목에 이벤트 위임을 적용해서 클릭 시 강조 표시를 해보세요.

// 답:
let listContainer = document.getElementById("itemList");
listContainer.addEventListener("click", function(event) {
    if (event.target.tagName === "LI") {
        // 기존 강조 제거
        let allItems = listContainer.querySelectorAll("li");
        for (let i = 0; i < allItems.length; i++) {
            allItems[i].style.fontWeight = "normal";
        }
        // 클릭된 항목만 강조
        event.target.style.fontWeight = "bold";
    }
});

추가 문제 3. 카드 요소들에 클래스 기반 이벤트 위임을 적용해보세요.

// 답:
let cardArea = document.getElementById("cardArea");
cardArea.addEventListener("click", function(event) {
    if (event.target.classList.contains("card")) {
        console.log("카드 선택됨");
        event.target.style.border = "2px solid blue";
    }
});

추가 문제 4. 이벤트 위임의 가장 큰 장점 2가지는 무엇인가요?

답: 1) 메모리를 절약할 수 있어요(많은 자식 요소에 각각 이벤트를 등록하지 않아도 됨), 2) 나중에 동적으로 추가되는 요소에도 저절로 이벤트가 적용돼요.

추가 문제 5. 다음 코드에서 문제점을 찾고 수정해보세요.

let container = document.getElementById("container");
container.addEventListener("click", function(event) {
    this.style.color = "red";
});

답: this는 부모 컨테이너를 가리키므로 클릭된 자식 요소를 처리할 수 없습니다. 올바른 코드:

let container = document.getElementById("container");
container.addEventListener("click", function(event) {
    if (event.target.tagName === "BUTTON") { // 타겟 확인 추가
        event.target.style.color = "red";
    }
});

🔄 단계별 진행 과정 정리

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

1단계 과정: 부모 컨테이너 찾기 → 클릭 이벤트 위임 → event.target으로 자식 구분 → 각각 처리

2단계 과정: 목록 찾기 → 클릭 이벤트 위임 → li 태그 확인 → 완료 상태 토글

3단계 과정: 컨테이너 찾기 → 클릭 위임 → 클래스 확인 → 선택 상태 관리

📂 마무리 정보

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

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


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

'12. 클릭하고 반응하기 (이벤트 처리) > 12.3 이벤트 위임' 카테고리의 다른 글

12.3.2 동적 요소에 이벤트 걸기 - 새로 온 친구들도 함께하는 따뜻한 시스템  (0) 2025.07.17

'12. 클릭하고 반응하기 (이벤트 처리)/12.3 이벤트 위임'의 다른글

  • 현재글12.3.1 이벤트 위임이란? - 하나가 모두를 품는 따뜻한 이야기

관련글

티스토리툴바