button.addEventListener("click", handleClick()); 로 작성하면 안되는 이유
    1

    button.addEventListener("click", handleClick()); 로 작성하면 안되는 이유

    Coding BasicsWeb ProgrammingFront-End Development

    button.addEventListener("click", handleClick());


    로 작성하면 안되는 이유가 무엇일까요?


    결론부터 한 줄로 말하면

    👉 addEventListener에는 “지금 실행하라”가 아니라

    “나중에 실행할 함수”를 등록해야 하기 때문에

    함수를 실행하지 말고 가리키기만 합니다.


    1. 지금 실행 vs 나중에 실행


    ❌ 잘못된 예


    button.addEventListener("click", handleClick());


    이건 무슨 뜻일까요?

    👉 지금 당장 handleClick()을 실행해라

    👉 클릭 안 해도 페이지 로딩 순간에 바로 실행됨

    그래서 이벤트랑 전혀 상관이 없어져요 ❌


    ✅ 올바른 예


    button.addEventListener("click", handleClick);


    이건 이렇게 읽으면 됩니다 👇

    “버튼이 클릭되면
    그때 handleClick 함수를 실행해 줘”

    ✔ 실행 ❌

    ✔ 예약(등록) ⭕


    2. 비유로 설명 (이게 핵심이에요)

    전화번호 비유

    1. handleClick
    2. 👉 전화번호만 적어둔 상태
    3. handleClick()
    4. 👉 지금 당장 전화 거는 행동

    addEventListener는 뭐냐면?

    👉 “나중에 전화 올 때 쓸 전화번호를 미리 적어두는 것”

    그래서 전화번호만 필요하지 지금 전화 걸면 안 되는 거예요


    3. 왜 “브라우저에서 실행”된다는 말이 나왔을까?


    👉 언제 실행할지는 내가 정하는 게 아니라 브라우저가 클릭 순간에 실행하기 때문입니다.


    즉,

    1. JS 코드 작성 시점 ❌
    2. 사용자가 클릭한 순간 ⭕
    3. 브라우저가 호출 ⭕


    4.흐름을 한 번에 정리하면


    function handleClick() {
    alert("클릭됨!");
    }

    button.addEventListener("click", handleClick);


    실행 순서

    1) 페이지 로딩

    → handleClick 함수 등록만 함

    2) 사용자가 버튼 클릭

    → 브라우저가

    → handleClick() 실행

    3) 한 문장으로 다시 정리 (시험용)

    addEventListener에서는
    이벤트가 발생했을 때 브라우저가 실행할 함수를 등록해야 하므로
    함수를 실행하지 않고 함수 참조만 전달한다.

    4) 이것만 기억하면 끝 🔑

    1. 함수이름 → 나중에 실행
    2. 함수이름() → 지금 실행
    3. addEventListener → 무조건 나중



    addEventListener 의 실행할 함수 입력 시, function() 이 아닌 function 만 입력한다는 것을 잊지마세요!