이벤트 위임으로 하위 요소 접근하기

드디어...!! 오늘부터 개인 JS 프로젝트로 영화 소개 프로젝트를 시작했습니다.

TBDM이라는 open API를 통해 영화 데이터를 불러오고 화면에 띄어주면 되는 그런 프로젝트입니다.

오늘 구현한 부분은 다음과 같습니다.

1. 데이터를 불러와서 화면에 렌더링(각 영화의 id 값을 movie-id라는 속성값으로 부여)

2. 각 영화 아이템을 누르면 상세 페이지 모달로 구현(movie-id 값을 통한 상세 정보 불러오기)

하지만, 중간에 한 가지 난관이 있었습니다. 바로 이벤트 위임 부분이었습니다.

상위 요소에만 이벤트 리스너를 붙이고, 클릭된 요소를 event.target으로 판별해 처리합니다

이 조건으로 인하여... 상위 요소인 selectMovie에 무작정 클릭 이벤트를 추가하고 클릭된 요소들을 콘솔로 찍어 보았습니다.

const selectMovie = document.getElementById('movie-list');

selectMovie.addEventListener('click', (e) => {
    console.log(e.target);
});

그런데, movie-id가 있는 상위 요소가 출력되기를 기대했지만, 내부의 img 태그 등 다른 요소들이 찍히는 경우가 있었습니다.

그렇다면 movie-id가 있는 요소에 어떻게 접근할까요?

이벤트 위임

ko.javascript.info

바로 closest() 메서드를 사용하면 됩니다.

elem.closest(selector)메서드는 elem의 상위 요소 중 selector와 일치하는 가장 근접한 조상 요소를 반환합니다.

이 방법을 적용하면 다음과 같습니다.

selectMovie.addEventListener('click', (e) => {
    console.log(e.target.closest('.movie-item'));
});

이제 클릭한 요소로부터 movie-id를 가진 가장 가까운 요소를 찾을 수 있습니다.

const selectMovie = document.getElementById('movie-list');

selectMovie.addEventListener('click', (e) => {
    const movieItem = e.target.closest('.movie-item'); // 가장 가까운 movie-item 요소 찾기
    if (movieItem) {
        const movieId = movieItem.getAttribute('movie-id'); 
        setTimeout(() => {
            openModal();
        }, 500); // 이전 데이터가 남아있어 의도적으로 0.5초의 delay
        getMovieDetail(movieId);
    } else {
        console.log('No movie-item element was clicked.');
    }
});

이후 getAttribute()로 movie-id 값을 가져오고, 이를 통해 영화를 상세 정보까지 연동하였습니다.

이벤트 위임 덕분에 각 요소에 개별 이벤트 핸들러를 할당하지 않고 상위 요소에만 이벤트 핸들러를 추가함으로써 코드가 훨씬 간결해진 것을 볼 수 있습니다.

FrontEnd-Dev