이벤트 위임

어떠한 nav바를 클릭했을 시 다른 상태를 보여줘야 한다고 생각합니다.

어떻게 할 수 있을까요? 일일히 버튼이 에스프레소 버튼, 프라푸치노 버튼이 클릭될 때마다 이벤트를 줘야할까요?

$('americano').addEventListener('click', e => {
    ...
  })
$('frappuccino').addEventListener('click', e => {
    ...
  })
$('blended').addEventListener('click', e => {
    ...
  })

이렇게 한다면 굉장히 비 효율적일 것입니다. 이럴 때 이벤트 위임을 이용할 수 있습니다.

이벤트 위임에는 이벤트 버블링과 캡쳐링이 있습니다.

 

 

 

 

버블링

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다.

캡쳐링

캡처링은 버블링과는 반대로 최상위 태그에서 해당 태그를 찾아 내려갑니다.

$('nav').addEventListener('click', e => {
    const isCategoryButton = e.target.classList.contains('cafe-category-name')
    if (isCategoryButton) {
      const categoryName = e.target.dataset.categoryName
      this.currentCategory = categoryName
      $('#category-title').innerText = `${e.target.innerText} 메뉴 관리`
      render()
    }
  })

이렇게 부모에서 이벤트가 발생했을 때 자식의 category이름을 가져와서 innerText를 교체해주면

훨씬 더 간결하게 코드를 짤 수 있습니다.