Vanilla JS - Events and event handlers

다음과 같이 자바스크립트에서 이벤트를 캐치해서 사용이 가능하다.

단, 주의할점은 window.addEventListener("resize", handleResize())

상기와 같이 호출함수 자리에 handleResize() 처럼 사용하면 이벤트가 발생됬을대 함수가 호출되는게 아니라

즉시 호출되어 버린다.

• .addEventListener("이벤트이름", 호추함수명) - 이벤트리스너

• "resize"

  // event 파라미터는 어디서생성되는가? 자바스크립트가 자동으로 함수에 객체를 붙인다.
  function handleResize(event){
      console.log("사이즈변경 핸들러 호출 : ", event);
  }
  ​
  window.addEventListener("resize", handleResize); // ("이벤트이름", 호출될함수)

  사이즈변경 핸들러 호출 :  
      Event {isTrusted: true, type: "resize", target: Window, currentTarget: Window, eventPhase: 2, …}

• "click"

  const getId = document.querySelector("#title");
  ​
  function handleClick(event){
      console.log("클릭 핸들러 호출 : ", event);
  }
  ​
  getId.addEventListener("click", handleClick);

  클릭 핸들러 호출 :  MouseEvent {isTrusted: true, screenX: 2040, screenY: 148, clientX: 134, clientY: 50, …}