[interactive web] Event Handler 리팩토링 - DOM, querySelector 개선

Event Handler 만들 때 주의

<script>
      (function () {
        const stageElem = document.querySelector(".stage");
        // 현재 활성화된 아이템을 저장

        function doorHandler(e) {
          const targetElem = e.target;

          currentItem = document.querySelector(".door-opened");
          if (currentItem) {
            currentItem.classList.remove("door-opened");
          }

          if (targetElem.classList.contains("door-body")) {
            targetElem.parentNode.classList.add("door-opened");
          }
        }

        stageElem.addEventListener("click", doorHandler);
      })();
    </script>

위 코드는 DOM 요소를 계속 선택하기 때문에 효율적이지 못하다.

• 리팩토링 1

<script>
      (function () {
        const stageElem = document.querySelector(".stage");
        // 현재 활성화된 아이템을 저장
        let currentItem;

        function doorHandler(e) {
          const targetElem = e.target;

          if (currentItem) {
            currentItem.classList.remove("door-opened");
          }

          if (targetElem.classList.contains("door-body")) {
            targetElem.parentNode.classList.add("door-opened");
            currentItem = targetElem.parentNode;
          }
        }

        stageElem.addEventListener("click", doorHandler);
      })();
    </script>

변수를 따로 밖에 선언한 후 사용한다.

• 리팩토링 2

<script>
      (function () {
        const stageElem = document.querySelector(".stage");
        // 현재 활성화된 아이템을 저장
        let currentItem;

        function activate(elem) {
          elem.classList.add("door-opened");
          currentItem = elem;
        }

        function inactivate(elem) {
          elem.classList.remove("door-opened");
        }

        function doorHandler(e) {
          const targetElem = e.target;

          if (currentItem) {
            inactivate(currentItem);
          }

          if (targetElem.classList.contains("door-body")) {
            activate(targetElem.parentNode);
          }
        }

        stageElem.addEventListener("click", doorHandler);
      })();
    </script>

한 함수에 많은 기능이 들어가있기 때문에 함수를 분리해준다. 추후 개선이 용이하다.