23-06-02 T.I.L 이벤트 버블링

문제설명

 let temp_html = `<div class="flip-box" onclick="select(${id})">
                                            <div class="flip">
                                                <div class="front">
                                                <div class="img-cut"> 
                                                <img src="https://image.tmdb.org/t/p/original/${img}"
                                                class="card-background">
                                                <img src="https://image.tmdb.org/t/p/original/${img}"
                                                class="card-img">
                                                </div>
                                                <h5 id="movie_title" class="card-title">${title}</h5>                                                                                               
                                                </div>
                                                <div class="back">
                                                <p class="card-grade">-${grade}-</p>
                                                <p class="card-text">${overview}</p>
                                                </div>
                                            </div>
                                        </div>`;
 document.querySelector("#cards-box").insertAdjacentHTML("beforeend", temp_html)

맨 위 코드, <div class="flip-box" onclick="select(${id})">는 fetch로 가져온 모든 데이터에 onclick()을 할당한다.

이는 가져온 데이터의 개수가 많아질 수록 메모리의 낭비를 초래하는 코드다.

이를 방지하고자 더 효율적인 코드로 개선하고 싶다.

시도

이벤트 버블링이라는 현상이 있다. 이는 하위 요소에서 발생한 이벤트가 상위 요소로 전파되는 현상을 의미한다.

즉 템플릿의 최상위 요소인 `<div class="flip-box" onclick="select(${id})">에 "select(${id})함수를 넣는게 아니라

 document.querySelector("#cards-box"), 템플릿의 상위 div인 class=cards-box를 활용해서 하위 요소의 event를 받아오는

코드를 짤 생각이다.

해결

function handleClickCard({ target }) {
    if (target === cardList) return;
    if (target.matches(".movie-card")) {
      alert(`영화 id: ${target.id}`);
    } else {
      alert(`영화 id: ${target.parentNode.id}`);
    }
  }
};

먼저 event를 받는 함수를 만든다.  if (target === cardList) return; 이 함수로 카드 영역 외의 클릭 event를 방지한다.

target.matches(".movie-card") 카드를 클릭하거나 else {alert(`영화 id: ${target.parentNode.id}`);} 그 밖의 요소를 클릭할 때

alert가 발생한다.

 

 const cardList = document.querySelector("#card-box");
 
 
 cardList.addEventListener("click", handleClickCard);

마지막으로 card-box를 cardList에 할당하고 event 함수를 부여하면 된다.

알게된 점

같은 기능을 하는 함수를 반복해서 할당하면 메모리의 낭비가 생긴다는 것을 알았다.

하위요소에서 발생한 이벤트가 상위요소까지 전달되는 이벤트 버블링의 현상에 대해서 알 수 있었다.