오늘의집 Clone Coding - MyMenu 토글

• MyMenu 버튼 클릭 시, MyMenu Content 활성화 (토글)
• Window 클릭 시, MyMenu Content 비활성화
  - 즉, 백그라운드 클릭 시 MyMenu Content 비활성화가 되어야 함.

const myMenu = document.querySelector('.my-menu')
const myMenuButton = document.querySelector('.my-menu-button')
const myMenuContent = document.querySelector('.my-menu-content')

function closeMyMenuOnClickingOutside(e) {
  if (!myMenu.contains(e.target)) {
    myMenu.classList.remove('is-active')
  }
}

function toggleMyMenu() {
  myMenu.classList.toggle('is-active')
}

myMenuButton.addEventListener('click', toggleMyMenu)

window.addEventListener('click', closeMyMenuOnClickingOutside)

mymenu content를 비활성화 시킬 때
window에 click 이벤트를 걸어주어, e.target이 myMenu에 포함되지 않을 때만 mymenu content가 제거되게 코드를 작성하였다.

문제점 ?

문제는, mymenu content가 활성화 되어있지 않을 때에도 window click 이벤트가 활성화 된다는 점이다. closeMyMenuOnClickingOutside 함수가 계속 실행이 된다는 것이다.

위의 문제를 해결하기 위하여 정말 필요한 시점에만 closeMyMenuOnClickingOutside 함수가 작동할 수 있게끔 수정하자. 즉 mymenu content가 열려있을 때만 함수가 실행되면 된다. 불필요한 이벤트를 심어두는 것을 막음으로써 퍼포먼스를 개선 시킬 수 있다.

const myMenu = document.querySelector('.my-menu')
const myMenuButton = document.querySelector('.my-menu-button')
const myMenuContent = document.querySelector('.my-menu-content')

function closeMyMenuOnClickingOutside(e) {
  if (!myMenu.contains(e.target)) {
    myMenu.classList.remove('is-active')
    // removeEventListener 등록
    window.removeEventListener('click', closeMyMenuOnClickingOutside)
  }
}

function toggleMyMenu() {
  if (!myMenu.classList.contains('is-active')) {
    // addEventListener 등록
    window.addEventListener('click', closeMyMenuOnClickingOutside)
  }
  myMenu.classList.toggle('is-active')
}

myMenuButton.addEventListener('click', toggleMyMenu)

해결 방법 중 하나는, toggleMenu를 클릭 했을 때 addEventListener를 이용하여 closeMyMenuOnClickingOutside함수를 등록한 뒤, is-active class를 활성화 시켜주고

mymenu content를 제외한 백그라운드를 클릭 했을 때, is-active class를 비활성화 시키면서 removeEventListener를 이용하여 closeMyMenuOnClickingOutside함수를 제거시켜준다.