[javascript] 응용 기록 6

이벤트 위임의 문제점

target 속성을 이용하면 버튼 안의 아이콘이나 글자를 잡는다.

(버튼 자체를 잡지 못함)

 

해결 방안

1) css

이벤트를 받지 않을 대상에 pointer-event: none; 을 부여한다.

-> 하위에 있는 자식들도 target으로 잡을 수 없기 때문에 복잡한 구조에서는 적절하게 사용해야 한다.

 

2) 자바스크립트

부모를 타고 올라가서 조사하는 방법

<script>
  (function () {
    const menu = document.querySelector(".menu");

    function clickHandler(e) {
      let elem = e.target;

      while (!elem.classList.contains("menu-btn")) {
        elem = elem.parentNode;

        if (elem.nodeName === "BODY") {
          elem = null;
          return;
        }
      }
      console.log(elem.dataset.value);
    }

    menu.addEventListener("click", clickHandler);
  })();
</script>

 

3) closet

elem1에 해당하는 가장 가까운 e.target의 부모를 잡아내는 것

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