개인과제로 영화검색사이트 구현하기 중에 잘 몰랐던 함수가 있어 정리해보려고한다.
그것은 바로 addEventListener함수!
const container = document.querySelector("#movie-container");
// console.log(container);
container.addEventListener("click", (e) => {
let movieCard;
// console.log(movieCard);
if (e.target.className === "movie-card") {
movieCard = e.target;
} else {
movieCard = e.target.parentNode;
}
let _id = movieCard.getAttribute("id");
alert(`movie_id: ${_id}`);
});movieCard라는 변수를 선언하고 클릭 시 발생할 이벤트를 콜백함수로 넣어준다.
저 분기문은 클릭한 곳의 클래스명이 movie-card가 아니면 그 부모 요소를 포함하여 클릭 이벤트를 실행시켜준다.
클릭 이벤트는 alert창이 뜨면서 영화들의 고유id값이 불러와지게끔 만들었다.
이제 남은건 검색기능...
제일 큰 산이 남았다 ^)^
