자바스크립트로 할 수 있는 가장 간단한 작업 중 하나가 바로 요소의 클릭 횟수를 세는 것입니다. 클릭 수를 저장할 변수를 하나 선언하고, 대상 요소에 addEventListener 메서드를 사용하기만 하면 됩니다.
예를 들어 홈 버튼처럼 버튼 요소의 클릭 횟수를 추적하고 싶다고 가정해 보겠습니다.
HTML 마크업
버튼 요소를 만들고 button-home 클래스를 지정합니다:
<button class="button-home">Home</button>자바스크립트
JavaScript 파일에 다음 코드를 추가합니다(코드 설명은 아래에서 이어집니다):
let buttonHome = document.querySelector(".button-home")
let CountButtonHomeClicks = 0
buttonHome.addEventListener("click", function() {
CountButtonHomeClicks += 1
console.log(CountButtonHomeClicks)
})실행 결과:
위 버튼 요소에는 클릭하기 쉽도록 CSS 스타일을 약간 추가했습니다.
자바스크립트 코드에서 일어나는 일:
- 먼저
querySelector()메서드로 버튼 요소의button-home클래스를 선택한 후,buttonHome변수에 할당합니다. - 그다음 클릭 수를 저장할
CountButtonHomeClicks변수를 선언하고, 기본 초기값으로 0을 지정합니다. addEventListener()메서드를 사용해buttonHome요소에 이벤트 리스너를 등록합니다.- 이벤트 리스너 내부에서는
'click'이벤트를 감지하도록 지정하고, 클릭 이벤트가 발생할 때마다 실행할function()을 정의합니다. - 함수 내부에서는 클릭 이벤트가 트리거될 때마다
CountButtonHomeClicks변수에 1을 더하도록 설정합니다. 1을 더할 때는+=(플러스 이퀄스) 연산자를 사용합니다. - 마지막으로
console.log()를 통해CountButtonHomeClicks변수의 값을 클릭할 때마다 콘솔에 출력합니다.
이제 특정 요소의 클릭 횟수를 세는 방법을 배웠습니다.
알아두면 좋은 점:
- 위 코드는 ES6 문법을 사용합니다. ES5를 사용하는 경우
let을var로 바꾸기만 하면 동일하게 작동합니다. - 이 예제에서 사용한 함수 유형은 이름이 없다는 점에서 익명 함수(anonymous function)라고 부르며, 함수 표현식이나 함수 선언문과는 구별됩니다.
- 익명 함수는 재사용할 수 없습니다. 여러 이벤트에서 같은 함수를 호출해야 한다면 함수 표현식 또는 함수 선언문을 사용하세요.
위의 전체 코드를 담은 CodePen 예제도 함께 준비되어 있으니 직접 실습해 보세요.