특정 요소의 클릭 횟수를 세는 것은 JavaScript로 할 수 있는 가장 간단한 작업 중 하나입니다. 클릭 수를 저장할 변수를 선언하고, 대상 요소에 addEventListener 메서드를 사용하기만 하면 됩니다.
예를 들어 홈 버튼처럼 버튼 요소가 몇 번 클릭되었는지 추적하고 싶다고 가정해 보겠습니다.
HTML 마크업
먼저 HTML 버튼 요소를 만들고 button-home이라는 클래스를 지정합니다.
<button class="button-home">Home</button>JavaScript 코드
다음 코드를 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)라고 부릅니다. 이는 함수 표현식(function expression)이나 함수 선언(function declaration)과 대비되는 개념입니다.
- 익명 함수는 재사용할 수 없습니다. 여러 이벤트에서 같은 함수를 호출해야 한다면 함수 표현식이나 함수 선언을 사용하는 것이 좋습니다.
전체 코드 받기
위에서 설명한 전체 코드는 CodePen에서 확인하고 직접 실행해 볼 수 있습니다.