JavaScript 버튼 클릭 시 addEventListener()가 반복 실행되도록 하는 방법

addEventListener()로 버튼 클릭 이벤트 반복 처리하기

JavaScript의 addEventListener()는 onclick 속성과 달리 기존 이벤트 핸들러를 덮어쓰지 않고 새로운 리스너를 추가하기 때문에, 버튼을 클릭할 때마다 등록된 함수가 계속해서 실행됩니다. 버튼을 클릭할 때마다 addEventListener()가 반복적으로 작동하도록 구현하려면 아래 코드를 사용하면 됩니다.

예제

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<button id="pressButtonDemo">Click Me</button>
<script>
    var eventValue = function (event) {
      document.body.appendChild(document.createElement('div'))
      .textContent = event.type;
    }
    var pressed = document.querySelector("#pressButtonDemo");
    pressed.addEventListener("click", eventValue);
</script>
</body>
</html>

위 코드의 핵심은 eventValue라는 함수를 정의한 뒤, querySelector()로 버튼 요소를 가져와서 addEventListener("click", eventValue)로 클릭 이벤트를 등록하는 부분입니다. 버튼이 클릭될 때마다 새로운 div 요소가 생성되어 body에 추가되고, 발생한 이벤트의 유형(예: click)이 화면에 표시됩니다.

프로그램 실행 방법

위 프로그램을 실행하려면 파일 이름을 "anyName.html(index.html)"로 저장한 후, 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. 그다음 VS Code 편집기에서 "Open with Live Server" 옵션을 선택하면 브라우저에서 바로 결과를 확인할 수 있습니다.

실행 결과

프로그램을 실행하면 다음과 같은 초기 화면이 나타납니다.

JavaScript 버튼 클릭 시 addEventListener()가 반복 실행되도록 하는 방법

여기서 "Click Me" 버튼을 클릭하면 다음과 같은 결과가 표시됩니다.

JavaScript 버튼 클릭 시 addEventListener()가 반복 실행되도록 하는 방법

이제 버튼을 한 번 더 클릭해 보세요. 버튼을 클릭할 때마다 이벤트가 누적되어 처리되며, 클릭한 횟수만큼 이벤트 정보가 화면에 추가되는 것을 확인할 수 있습니다.

JavaScript 버튼 클릭 시 addEventListener()가 반복 실행되도록 하는 방법