[Javascript] 팝업창 닫기 버튼 closest()

페이지 작업을 하던 중 팝업창 기능을 구현하고 있었다. 그리고 닫기 버튼을 누르는 기능에서 클릭된 버튼(event.target)의 부모를 찾아 해당 버튼을 자식으로 가진 팝업을 닫는 기능을 작업던 중 작은 문제가 발생했다.

팝업창

• 닫기 버튼을 누르는 기능에서 클릭된 버튼(event.target)의 부모를 찾아 해당 버튼을 자식으로 가진 팝업을 닫는 기능을 작업중이었다. ⇒ parentNode 를 통해 버튼의 부모에 해당하는 팝업을 찾는 식
  
• 하지만 팝업의 html 구조를 수정할 때 부모가 바뀌었고, 이때 해당 기능이 동작하지 않게 된다.
• 이에 대한 해결책으로 단순히 부모를 찾는 parentNode 보다, 특정 선택자에 일치하는 가장 가까운 조상을 찾아주는 closest() 을 사용하였고, 이는 이후 요소의 구조가 바뀌어도 기능에 문제를 발생시키지 않는 효율적인 방법임을 알게되었다.

// html

<div class="full-popup">
    <div id="popup-01" class="story-popup">
      <div class="pop-inner">
          content01
      </div>
      <button type="button" class="btn-close" aria-label="close popup"></button>
    </div>
    <div id="popup-02" class="story-popup">
      <div class="pop-inner">
          content02
      </div>
      <button type="button" class="btn-close" aria-label="close popup"></button>
    </div>
    <div id="popup-03" class="story-popup">
      <div class="pop-inner">
          content03
      </div>
      <button type="button" class="btn-close" aria-label="close popup"></button>
    </div>
    <div id="popup-04" class="story-popup">
      <div class="pop-inner">
          content04
      </div>
      <button type="button" class="btn-close" aria-label="close popup"></button>
    </div>
</div>

// js

const $$btnOpen = document.querySelectorAll('.btn-open');
const $$btnClose = document.querySelectorAll('.full-popup .btn-close');
const $fullPopup = document.querySelector('.full-popup')
const $body = document.querySelector('body')
let $target

// popup 열기
$$btnOpen.forEach((btn) => {
    btn.addEventListener('click', function () {
        let targetID = this.getAttribute('href');
        $target = document.querySelector(targetID)
        $target.style.display = 'block';
        $fullPopup.style.display = 'block';
        $body.style.overflow = 'hidden';
        console.log(targetID)
    })
})

// fullPopup 누르면 popup 닫기
$fullPopup.addEventListener('click', function(event) {
    if(event.target !== $fullPopup) { return }
    closeFullPopup($target)
})

function closeFullPopup(target) {
    target.style.display = 'none';
    $fullPopup.style.display = 'none';
    $body.style.overflow = 'auto';
}

// popup 닫기
$$btnClose.forEach((btn) => {
    btn.addEventListener('click', function () {
				// const $storyPopup = this.parentNode
        const $storyPopup = this.closest('.story-popup')
        $storyPopup.style.display = 'none';
        $fullPopup.style.display = 'none';
        $body.style.overflow = 'auto';
    })
})

고친 부분

// const $storyPopup = this.parentNode
   const $storyPopup = this.closest('.story-popup')

출처: https://developer.mozilla.org/ko/docs/Web/API/Element/closest