closest()

closest() 를 이용한 이벤트 위임

ex 1)

<div class="elem1" data-id="about">
    <div class="elem2">
      <div class="elem3">elem3</div>
    </div>
  </div>

elem2를 클릭하거나 elem3를 클릭해도 바깥쪽 elem1의 data id 인 about이 출려되게하려면

.elem2 {
      pointer-events: none;
    }

elem2의 pointer-events: none; 를 설정해준다.

const elem1 = document.querySelector('.elem1');
    elem1.addEventListener('click', e => {
      console.log(e.target.dataset.id);
      ) );
    });

ex 2)

css pointer event를 사용하지않고 script로만 처리하기

const elem1 = document.querySelector('.elem1');
    elem1.addEventListener('click', e => {
      // console.log(e.target.dataset.id);
      console.log( e.target.closest('.elem1') );
    });

closest를 사용하여 매개변수.elem1 을 입력해주면

e.target의 가장가까운 .elem1을 찾아준다.

그래서 아무 div를 클릭하면

 <div class="elem1" data-id="about"></div> // 출력