[JS] addEventListener 와 classList( + toggle)

addEventListener

addEventListener는 요소에 이벤트를 추가해 줄 수 있다.

example을 querySelector로 받아왔다고 가정하고 아래와 같이 작성 가능하다.

example.addEventListener("click", 함수이름 );

중요한 건 함수 이름을 쓸 때 ()를 쓰지 않는 것이다.

 

classList (add remove toggle)

대표적 사용으로 요소의 이벤트가 일어났을 때 css style 변경에 사용 가능하다.

className은 class 전체를 바꾸지만 classList를 사용하면 부분적으로 수정이 가능해 이용할 수 있다.

add 와 remove의 사용 예로는 아래와 같다.

 if(example.classList.contains(클래스 이름)){
    example.classList.remove(클래스 이름)
  }
  else example.classList.add(클래스 이름);

이처럼 클래스를 추가하고 제거할 수가 있다. (이를 이용해 다양하게 사용하자)

하지만 위 코드를 더 좋은 방법으로 압축한 함수가 있다.

바로 toggle인데 이 toggle을 이용하면 한 줄로 압축 가능하다.

  example.classList.toggle(클래스 이름);

이러면 이벤트에 따라 클래스를 생성했다 지웠다 할 수 있게 된다.

+ 클래스 이름 말고 두 번째 인자를 줄 수 있는데 두 번째 인자가 참일 때 toggle이 효과를 낸다고 볼 수 있다. (ex i < 10)