takahirohonda · November 10, 2019 01:36
diff --git a/better-way-to-attach-event-listener-with-vanilla-js-5-closest-header-nav.js b/better-way-to-attach-event-listener-with-vanilla-js-5-closest-header-nav.js
 // Instead of calling addEventListerner 3 times...
 document.querySelector('.header-right-nav')
  .addEventListener('click', e => {
    funcForHeaderRightNavClick(e);
 })
 document.querySelector('.header-left-nav')
  .addEventListener('click', e => {
    funcForHeaderLeftNavClick(e);
 })
 document.querySelector('.nav-menu')
  .addEventListener('click', e => {
    funcForHeaderNavMenuClick(e);
 })
 
 // We could attach event listener to a header section...
 document.querySelector('.header')
  .addEventListener('click', e => {
  if (event.target.closest('.header-right-nav') !== null) {
    funcForHeaderRightNavClick(e);
  } 
  if (event.target.closest('.header-left-nav') !== null) {
    funcForHeaderLeftNavClick(e);
  }
  if (event.target.closest('.nav-menu') !== null) {
    funcForHeaderNavMenuClick(e);
  }
 })