button.addEventListener("click", handleClick());
로 작성하면 안되는 이유가 무엇일까요?
결론부터 한 줄로 말하면
👉 addEventListener에는 “지금 실행하라”가 아니라
“나중에 실행할 함수”를 등록해야 하기 때문에
함수를 실행하지 말고 가리키기만 합니다.
1. 지금 실행 vs 나중에 실행
❌ 잘못된 예
button.addEventListener("click", handleClick());
이건 무슨 뜻일까요?
👉 지금 당장 handleClick()을 실행해라
👉 클릭 안 해도 페이지 로딩 순간에 바로 실행됨
그래서 이벤트랑 전혀 상관이 없어져요 ❌
✅ 올바른 예
button.addEventListener("click", handleClick);
이건 이렇게 읽으면 됩니다 👇
“버튼이 클릭되면
그때 handleClick 함수를 실행해 줘”✔ 실행 ❌
✔ 예약(등록) ⭕
2. 비유로 설명 (이게 핵심이에요)
전화번호 비유
handleClick- 👉 전화번호만 적어둔 상태
handleClick()- 👉 지금 당장 전화 거는 행동
addEventListener는 뭐냐면?
👉 “나중에 전화 올 때 쓸 전화번호를 미리 적어두는 것”
그래서 전화번호만 필요하지 지금 전화 걸면 안 되는 거예요
3. 왜 “브라우저에서 실행”된다는 말이 나왔을까?
👉 언제 실행할지는 내가 정하는 게 아니라 브라우저가 클릭 순간에 실행하기 때문입니다.
즉,
- JS 코드 작성 시점 ❌
- 사용자가 클릭한 순간 ⭕
- 브라우저가 호출 ⭕
4.흐름을 한 번에 정리하면
function handleClick() {
alert("클릭됨!");
}
button.addEventListener("click", handleClick);
실행 순서
1) 페이지 로딩
→ handleClick 함수 등록만 함
2) 사용자가 버튼 클릭
→ 브라우저가
→ handleClick() 실행
3) 한 문장으로 다시 정리 (시험용)
addEventListener에서는이벤트가 발생했을 때 브라우저가 실행할 함수를 등록해야 하므로
함수를 실행하지 않고 함수 참조만 전달한다.
4) 이것만 기억하면 끝 🔑
함수이름→ 나중에 실행함수이름()→ 지금 실행addEventListener→ 무조건 나중
addEventListener 의 실행할 함수 입력 시, function() 이 아닌 function 만 입력한다는 것을 잊지마세요!