동적 element 생성 event 바인딩

발생한 오류

동적으로 생성한 tag는 영화 카드를 클릭 했을 때 modal을 띄우는 event를 바인딩 할 생각으로
동적 생성한 tag를 querySelectorAll에 class명으로 모든 영화 카드의 버튼을 불러와 forEach로 반복하면서 버튼들마다 event를 바인딩 하였다.

여기서 문제가 버튼 하위요소가 다양하게 있는 구조였고 클릭을 할 때마다 하위요소가 클릭되는 현상이 생겼다.
구글링을 통해 다양한 방법을 이용해 버블, 캡처를 다 막아도 보고 하위에서 버블이벤트현상을 막는 .stopPropagation()를 사용도 해봤지만 근본적으로 해결되진 못했다.

<button class="open-modal">
  <div class="main__top5-movies__info">
     <h1>${title}</h1>
     <p>
          ${overview}
     </p>
     <div class="star-wrapper">
        <div class="star-area">
          <span class="starpoint" style="width: ${.toFixed(1) * 10}%">		</span>
        </div>
      </div>
  </div>  
</button>

위 코드가 동적으로 생성되던 코드이다.

const $openModalBtns = document.querySelectorAll(".open-modal");
$openModalBtns.forEach((btn) => {
  btn.addEventListener("click", (event) => {
    console.log(event);
  });
});

위의 코드가 버튼을 호출해 반복문을 돌며 event를 바인딩하는 코드이다.

해결하기위해 사용했던 방법

• 하위 요소의 css에 pointer-events: none;속성을 사용해 모든 pointer이벤트를 사용했을때 원하는 button이 클릭되었지만 버튼 내부에서 scroll을 사용해야해서 나에게 필요한 해답은 아니었다.
• 위에 적은것 처럼 하위요소에 .stopPropagation()를 사용해봤지만 button event가 먹통이되었다... (이 부분은 공부가 필요한듯..)
• 마지막으로 시도한 tag에 onclick을 사용하여 함수를 직접 호출하게 했다.
  이 방법으로 성공했다.

<div class="main__top5-movies__info" onclick="openDetail(this, ${id})">
  <h1>${title}</h1>
  <p>
    ${overview}
  </p>
  <div class="star-wrapper">
    <div class="star-area">
      <span class="starpoint" style="width: ${vote_average.toFixed(1) * 10}%"></span>
    </div>
  </div>
</div>

위 코드 처럼 클릭될 tag에 onclick으로 함수를 호출한다.

window.openDetail = (event, id) => {
  alert(`영화 id: ${id}`);
};

js파일 type을 module을 선언하면 일반적인 함수는 onclick으로 호출이 안된다고 한다...
그래서 window 객체를 사용해야한다.

위와 같이 window객체를 사용해 함수를 만들고 onclick으로 호출하면 원하는 결과를 얻을 수 있었다.