JavaScript에서 나중에 동적으로 생성되는 요소에 이벤트를 연결하려면 document.addEventListener()를 사용하는 것이 가장 효과적인 방법입니다.
동적 요소는 페이지가 처음 로드될 때 존재하지 않기 때문에, 일반적인 방식으로 해당 요소에 직접 이벤트 리스너를 등록하면 제대로 작동하지 않을 수 있습니다. 이때는 문서 전체(document)에 이벤트 리스너를 등록한 뒤, 실제 클릭된 대상(event.target)이 원하는 요소인지 확인하는 이벤트 위임(Event Delegation) 기법을 활용하면 됩니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=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>
</head>
<body>
<input type="button" value="submit" id="buttonSubmit" />
<script>
document.addEventListener('click',function(event){
if(event.target && event.target.id== 'buttonSubmit'){
console.log("Event generation on the button click")
}
});
</script>
</body>
</html>코드 설명
위 코드의 핵심은 다음과 같습니다.
document.addEventListener('click', ...): 문서 전체에 클릭 이벤트 리스너를 등록합니다.event.target.id == 'buttonSubmit': 클릭된 요소의 ID가buttonSubmit인지 확인하여, 버튼이 클릭된 경우에만 콘솔에 메시지를 출력합니다.
이러한 방식은 나중에 DOM에 추가되는 요소에도 자동으로 적용되므로, 동적으로 생성되는 버튼이나 목록 항목 등에 이벤트를 처리할 때 특히 유용합니다.
실행 방법
위 프로그램을 실행하려면 파일 이름을 “anyName.html(index.html)”로 저장한 후, 파일을 마우스 오른쪽 버튼으로 클릭하세요. 그다음 VS Code 편집기에서 “Open with Live Server” 옵션을 선택하면 브라우저에서 바로 실행할 수 있습니다.
출력 결과
위 코드를 실행하면 다음과 같은 화면이 표시됩니다.
여기서 submit 버튼을 클릭하면, 브라우저 개발자 도구의 콘솔(Console) 탭에 이벤트가 정상적으로 발생했음을 알리는 메시지가 출력됩니다.
