[Section 05] 자바스크립트 이벤트 다루기

🔮 이벤트 기본 조작

const ilbuni = document.querySelector(".ilbuni.c");
ilbuni.addEventListener("click", function () {
  ilbuni.classList.toggle("special");
});

조작하고자 하는 DOM을 가져와서 addEventListener(type, function, options) 를 해준다.

See the Pen 05_01 by sohnsookyoung (@sohnsookyoung) on CodePen.

근데 여기서 script 태그를 head 태그 안에 넣어주기 위해서는 페이지 로드가 끝나고 script 태그가 로드되어야 하므로 load 클래스를 사용한다.

window.addEventListener("load", function () {
  const ilbuni = document.querySelector(".ilbuni.c");
  ilbuni.addEventListener("click", function () {
    ilbuni.classList.toggle("special");
  });
});

근데 이렇게 하면 모든 페이지가 로드된 이후에 작동이 되므로 비효율적이다.

📍 효율적으로 head 태그 안에 script 태그 넣기

window.addEventListener("DOMContentLoaded", function () {
  const ilbuni = document.querySelector(".ilbuni.c");
  ilbuni.addEventListener("click", function () {
    ilbuni.classList.toggle("special");
  });
});

DOMContentLoaded 를 사용해준다. DOMContentLoaded를 사용해주면 돔이 로드가 된다면 바로 이벤트 리스너를 사용할 수 있도록 해준다.

📍 RULE 1. body 태그에 script 태그 넣어주기

요즘은 이 방법을 더 많이 쓴다고 한다.

📍 RULE 2. 전역 변수를 최소화 하자

그래서 전역 변수를 최소화하기 위해서 작성해두었던 코드를 다시 함수로 감싸서 지역 변수로 만들어 준다. 이때 함수 이름이 붙으면 다시 그 함수는 전역 변수가 되므로 이름이 없는 함수를 만들어 준다.

(function () {
  const ilbuni = document.querySelector(".ilbuni.c");
  const clickInbuniHandler = () => {
    ilbuni.classList.toggle("special");
  };
  ilbuni.addEventListener("click", clickInbuniHandler);
})();

🔮 this와 이벤트 객체

(function () {
  const characters = document.querySelector(".characters");
  function clickHandler(e) {
    console.log(e.currentTarget);
    console.log(e.target);
  }
  characters.addEventListener("click", clickHandler);
})();

이벤트에 추가된 메소드의 경우 자동으로 e라는 매개변수가 추가된다.

• e.currentTarget: this와 e.currentTarget은 이벤트가 등록되어있는 객체를 가리킨다.
• e.target: e.target의 경우는 내가 클릭한 객체가 무엇인지를 알 수 있다.

🔮 움직이는 캐릭터 예제로 클릭 이벤트 익혀보기

See the Pen 05_03 by sohnsookyoung (@sohnsookyoung) on CodePen.

🔮 이벤트 위임

📍 반복문을 통해서 이벤트 리스너를 등록한 것은 비효율이다.

💡 sol: 부모 DOM에 이벤트 리스너를 등록하고 e.target을 사용해서 자식 노드에 이벤트를 적용시킨다.

❗ 문제점: 자식 노드 외의 다른 stage 공간이 클릭이 된다면 에러가 뜬다.

💡 sol: 조건문을 통해서 예외처리를 해준다. => classList.contains(‘클래스이름’)

최종.js

(function () {
  const stage = document.querySelector(".stage");
  function clickHandler(e) {
    if (e.target.classList.contains("ilbuni")) {
      stage.removeChild(e.target);
    }
  }
  stage.addEventListener("click", clickHandler);
})();

📍 이벤트 위임 받은 객체 안에 또 객체가 있는 경우

• pointer-events: none;: 클릭 이벤트를 받지 않는다. => 간단한 구조에서는 상관 없지만 하위에 있는 요소에 대한 다른 클릭 이벤트가 필요하다면 아래와 같은 클릭 이벤트 메소드를 작성해줄 수 있다.

• function clickBtnHandler(e) {
    let elem = e.target;
    while (!elem.classList.contains("menu-btn")) {
      elem = elem.parentNode;
      if (elem.nodeName === "BODY") {
        elem = null;
        return;
      }
    }
  }