이벤트 리스너와 몇 가지 예시, html 클래스 변경 방법에 대해서 정리해보겠습니다.
1. 이벤트 리스너(EventListener)란?
- 특정 이벤트가 발생할 시 자바스크립트 객체에서 이를 감지하는 것
- 이러한 감지한 이벤트에 따라 특정 함수를 호출하거나 값을 변경하는 것을 이벤트 처리라고 한다.
2. 이벤트 리스너 및 처리 예시
See the Pen Untitled by KwonRakhyun (@nack1400) on CodePen.
- h1.addEventListener("처리할 이벤트", 실행할 함수);
- click : 클릭시, mouseenter : 마우스가 들어올 시, mouseleave : 마우스가 나갈 시
- 기타 여러 이벤트들이 있음. 아래 링크 참조
https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener
EventTarget.addEventListener() - Web API | MDN
EventTarget의 addEventListener() 메서드는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정합니다.
developer.mozilla.org
3. html 클래스 추가 및 삭제, 변경
See the Pen Untitled by KwonRakhyun (@nack1400) on CodePen.
- if/else로 만든 함수는 classList의 api를 여러 개 사용
- contain : 해당 클래스가 있는지 확인, remove : 해당 클래스 제거, add : 해당 클래스 추가
- toggle을 활용하면 더 쉽게 나타낼 수 있다.
- toggle : 태그 안에 클래스가 있는지 확인해주고 없다면 넣어주고 있다면 빼줌
이상 이벤트 리스너와 처리, 자바스크립트로 html 클래스 변경하는 방법까지 정리해보았습니다.