반복문이나 배열을 이용해 버튼 목록을 동적으로 생성할 때, 사용자가 정확히 어떤 요소를 클릭했는지 알아내야 하는 경우가 자주 있습니다. 이럴 때 addEventListener() 메서드와 이벤트 객체의 target 속성을 활용하면 간단하게 해결할 수 있습니다.
핵심 원리
각 요소에 클릭(click) 이벤트 리스너를 등록하면, 콜백 함수로 전달되는 이벤트 객체(evnt)의 evnt.target을 통해 실제로 클릭된 요소를 확인할 수 있습니다. 나아가 dataset 속성으로 각 버튼에 고유한 데이터(예: 과목명)를 미리 저장해 두면, 어떤 버튼이 눌렸는지를 더욱 명확하게 식별할 수 있습니다.
예제 코드
다음은 'Javascript', 'MySQL', 'Java' 세 개의 버튼을 배열과 반복문으로 생성하고, 클릭된 버튼의 정보를 콘솔에 출력하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<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>
<body>
</body>
<script>
var subjects = ["Javascript", "MySQL", "Java"];
subjects.forEach(function (subject) {
var addButton = document.createElement('button');
addButton.innerHTML = subject;
addButton.dataset.subject = subject;
document.body.appendChild(addButton);
addButton.addEventListener('click', function (evnt) {
console.clear();
console.log('Subject ' + evnt.target.dataset.subject + ' pressed');
});
});
</script>
</html>실행 방법
위 프로그램을 실행하려면 파일 이름을 anyName.html(index.html)로 저장합니다. 그다음 VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭한 후 "Open with Live Server" 옵션을 선택하면 됩니다.
실행 결과
위 코드를 실행하면 다음과 같이 버튼 세 개가 화면에 출력됩니다.
이제 아무 버튼이나 클릭해 보세요. 클릭된 버튼의 과목명과 함께 다음과 같은 결과가 콘솔에 표시됩니다.
