북마크 기능 구현하기(1) - 이벤트 위임

이전 상황

원하는 영화를 따로 모아볼 수 있는 '북마크' 기능을 구현하고자 한다.

CSS도 곧 할겁니닷..!

 

우선 북마크 기능을 하고자 함수를 새로 만들었다.

function addBookmark() {
  const bookmarkBtn = document.querySelector(".book");

  bookmarkBtn.addEventListener("click", function () {
    alert("북마크");
  });
}

 

 

 

문제 상황

 

그러기 위해서는 모달창 내의 북마크 추가 버튼에 접근해야 하는데..

console.log도, alert도 아무 반응 없음에 의문점이 들었다.

 

❓``안의 태그에는 어떻게 접근하지? 

 

이전에는 class가 close인 닫기창에는 잘 접근했는데

그 이유는 모달창 함수 내에 닫기 기능을 구현했기 때문이다.

 

그럼 북마크 기능도 모달창 함수 내에 작성해야하나..? 너무 길어질텐데..

하는 생각이 들었다.

 

 위해서 '이벤트 위임'을 적용해야 했다.

 

 

 

이벤트 위임이란?

 

우선, 이벤트 위임이란 한 영역 내에서 같은 이벤트가 발생할 때 요소 마다 이벤트리스너를 붙이는 것이 아니라

그 상위 태그의 class를 지정하여 이벤트를 지정하는 것이다.

 

📍실제 적용

사실 그 전에도 이벤트 위임을 적용했다.

바로 영화 메인 페이지인데,

영화 카드 하나하나에 이벤트를 부여한 것이 아닌,

영화 카드 묶음(cardSection)에 이벤트리스너를 붙였다.

 

영화 카드 묶음(cardSection)의 class는 cards이며

👇🏻cards에 이벤트 리스너를 부여한 코드를 아래처럼 구현하였다.

const cardSection = document.querySelector(".cards");


cardSection.addEventListener("click", function (e) {
  const mvCard = e.target.closest(".mvCard");
  // console.log(mvCard);
  const cardID = mvCard.getAttribute("data-id");
  console.log(cardID);

  const clickModal = postArray.find(function (postArray) {
    return Number(postArray.id) === Number(cardID);
  });
  console.log(clickModal);
  displayModal(clickModal);
  modal.style.display = "block";
  document.body.style.overflow = "hidden";
});

 

 

 

문제 해결

 

위의 적용처럼 모달창 내에 있는 요소들(북마크 버튼, 닫기버튼)에게 이벤트 리스너를 부여하였다.

 

📌코드 구현

modal.addEventListener("click", function (e) {
  e.target.classList.contains("close")
    ? ((modal.style.display = "none"),
      (document.body.style.overflow = "scroll"))
    : null;

  e.target.classList.contains("book") ? alert("북마크 추가") : null;

  console.log(e.target);
});

 

📌코드 해석

삼항연산자를 통해 기능을 구현하였다.

간단히 설명하자면, 

조건 ? A : B

=> 조건이 참일 때 A를, 조건이 거짓일 때 B를 실행하기

 

조건에 해당하는 부분 :

e.target.classList.contains("close")

'e.target' : 내가 "click"한 요소에 접근하기

classList : 요소의 class명들

contains("") : ""을 포함하는 것

=> 내가 클릭한 요소의 class명 중, "close"를 갖고 있는 것

 

A에 해당하는 부분:

((modal.style.display = "none"), (document.body.style.overflow = "scroll"))

모달창 닫기, 메인 화면 스크롤 되기

 

B에 해당하는 부분: null

 

-

그 아래 부분(북마크 버튼)도 동일하게 구현했다.

e.target.classList.contains("book") ? alert("북마크 추가") : null;

버튼을 누르니 aleart창이 잘 뜬다.