Javascript Theory - Events and Events Handlers

Events and Events Handlers

자바스크립트는 이벤트를 다루기 위해 만들어졌다.

여기서 말하는 이벤트란, 웹사이트에서 발생하는 모든 것이다.

클릭, 인풋 체인지, 로드, 프린팅 등등등…

중요한 점은 자바스크립트는 이러한 이벤트를 중간에 가로챌 수 있다는 점이다.

이러한 이벤트를 감지하기 위해 이벤트 리스너를 추가해보자.

const title = document.querySelector("#title");

function handleResize() {
  console.log("I have been resized");
}

window.addEventListener("resize", handleResize);

여기서 중요한 점은, addEventListener의 메소드 아규먼트로 handleResize() 가 아닌 handleResize를 줘야한다는 것이다.

handleResize()를 주면 그 즉시 실행하기 때문에 우리가 원하는 의도와 맞지않다.

여기서 handleResize는 콜백함수로써 사용된다.

즉, 이벤트가 발생하는 시점에 호출되는 함수라는 의미이다.

const title = document.querySelector("#title");

function handleResize(event) {
  console.log(event);
}

window.addEventListener("resize", handleResize);

또한 콜백함수의 아규먼트로 event를 받을 수 있는데, 이 event는 자바스크립트가 주는 매개변수이다.

여기서 event 객체에는 여러가지 값들이 들어가있는데, 이는 매우 유용한 정보들을 포함하고 있다.

조건문으로 DOM 조작해보기

const title = document.querySelector("#title");

const BASE_COLOR = "rgb(52, 73, 94)";
const OTHER_COLOR = "#7f8c8d";

function handleClick() {
  const currentColor = title.style.color;
  if (currentColor === BASE_COLOR) {
    title.style.color = OTHER_COLOR;
  } else {
    title.style.color = BASE_COLOR;
  }
}

function init() {
  title.style.color = BASE_COLOR;
  title.addEventListener("click", handleClick);
}

init();

이렇게 하면 title을 클릭할 때 마다 색이 바뀌는 것을 알 수 있다.

개선

위에서 javascript가 css를 직접 제어하고 있는데, 이는 좋은 형태가 아니다.

자바스크립트이 의도하는 바가 아니기 때문에 아래와 css와 자바스크립트를 수정해준다.

body {
  background-color: #ecf0f1;
}

.btn {
  cursor: pointer;
}

h1 {
  color: #34495e;
  transition: color 0.5s ease-in-out;
}

.clicked {
  color: #7f8c8d;
}

const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleClick() {
  const currentClass = title.className;
  if (currentClass !== CLICKED_CLASS) {
    title.className = CLICKED_CLASS;
  } else {
    title.className = "";
  }
}

function init() {
  title.addEventListener("click", handleClick);
}

init();

이제 자바스크립트에서는 정의된 css를 이용하여 색을 바꾼다.

css 클래스로 btn을 선언했는데, 이는 title이라는 id를 갖고 있는 노드의 class name이다.

그러나 자바스크립트 코드에서 이 초기의 btn은 이후 색이 바뀌고 나면 무시되어져버린다.

classname의 초기상태를 유지하기 위해서는 classList를 사용해야한다.

classList는 함수를 갖고 이것을 사용해서 방금의 문제를 해결하는 것이 가능하다.

const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleClick() {
  const hasClass = title.classList.contains(CLICKED_CLASS);
  if (hasClass) {
    title.classList.remove(CLICKED_CLASS);
  } else {
    title.classList.add(CLICKED_CLASS);
  }
}

function init() {
  title.addEventListener("click", handleClick);
}

init();

classList는 class name들을 리스트로 관리해주기 때문에 초기 상태를 덮어씌우지 않게 된다.

그런데 이를 toggle을 사용해서 더욱 개선할 수 있다.

const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleClick() {
  title.classList.toggle(CLICKED_CLASS);
}

function init() {
  title.addEventListener("click", handleClick);
}

init();

toggle을 사용함으로써 매우 간단해진 코드를 볼 수 있다!

Reference

Vanilla Javascript for Beginners - 노마드 코더